BE Epcs pas ER 图 灵 程 序 设 计 从 书 


五 位 开发 高 手 ， 三 个 企业 应 用 示例 ， 真 实 再 现 React Native 开 发 场景 
一 次 性 开发 跨 平台 应 用 、 原 生体 验 ， 开 发 效 紊 高， 满足 前 端 开发 快速 迭代 需 3 





Deconstructing React Native Apps 


React Native 
应 用 开发 实例 解析 


[ 澳 ] Alexander McLeod | 斯洛文尼亚 ] Pavlo Aksonov 号 
[ED] Arjun Komath [ 美 ] Atticus White [ 美 ] lsaac Madwed 


林 吴 译 





\ 


中 国 工 信 出 版 集团 ”可 仿生 下 全 


SE POSTS & TELECOM PRESS 
图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 





效 字 有 版权 声明 


图 灵 社 区 的 电子 书 没有 采用 专 有 客 
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使 用 React Native 可 以 轻松 开发 跨 平 台 应 用 ， 并 
程 ， 就 可 以 为 自 
面 了 解 React Native 的 API 和 组 件 ， 并 
Native 的 历史 发 展 和 基础 知识 ， 包 括 原生 组 件 
TinyRobot 和 Fixt， 探 讨 了 当今 业界 使 用 React 
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无 需 等 待 Apple、Google 或 者 Amazon 的 审核 过 


己 的 应 用 发 布 更 新 。 本 书 主要 从 功能 扩展 和 实际 应 用 方面 讲解 React Native， 
阅读 本 书 无 需 React 开发 
和 第 三 方 库 ; 余下 三 章 则 分 别 介绍 三 个 企业 应 用 一 一 Myagi、 
Native 的 方式 , 以 及 生产 环境 下 需要 注意 的 问题 和 相应 对 策 。 
F 发 人 员 ， 以 及 所 有 对 React Native 感 兴趣 的 程序 员 。 
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什么 是 React Native ? 


你 可 能 已 经 听 说 过 React， 这 个 由 Facebook 开 发 的 框架 已 经 流行 多 时 ， 如 今 成 为 了 现代 Web 
开发 的 标准 。React 使 得 开发 者 可 以 编写 和 构建 声明 式 组 件 ， 清 晰 地 理解 应 用 架构 。React 不 会 给 
开发 者 的 其 他 技术 栈 造 成 冲突 ， 可 以 与 任意 后 端 技 术 甚 至 其 他 前 端 技术 搭配 使 用 。 

你 可 能 在 想 :“ 哇 ， 这 听 起 来 很 不 错 ， 但 用 在 移动 端 会 如 何 呢 ? 我 是 否 也 能 用 React 来 写 移动 
应 用 ? ” 

实际 上 ， 有 两 种 用 React 开 发 移动 端的 方式 。React 本 身 可 以 在 移动 Web 上 运行 ， 这 就 意味 着 
所 有 标准 React 元 素 都 可 用 。 然 而 这 样 做 本 质 上 还 是 开发 Web 应 用 , 所 有 基于 Web 搭 建 的 应 用 所 面 
临 的 性 能 和 权限 问题 ，React 应 用 同样 会 遇 到 。 


如 果 可 以 在 移动 端 用 React 进 行 原生 开发 ， 那 么 …… 


幸运 的 是 , 真 的 可 以 这 样 做 ! 如 果 你 打算 开发 原生 移动 应 用 , 用 React Native 吧 。React Native 
把 React 的 模式 与 范例 带 到 了 原生 移动 开发 中 。 它 的 思想 与 React 相 似 ， 不 对 现 有 的 应 用 架构 和 技 
术 栈 造成 冲突 。 开 发 者 可 以 把 React Native 与 几乎 所 有 的 技术 进行 组 合 ， 搭 建 出 满足 各 种 架构 模 
式 的 应 用 。 


尽管 两 者 非常 相似 ，React 和 React Native 之 间 依 然 有 很 多 明显 的 差别 。 首 先 ，React Native 自 
带 的 基础 组 件 库 与 React 的 不 同 。React Native 的 开发 过 程 不 需要 编写 div 和 span 标 签 ， 而 要 使 用 视 
图 以 及 文本 组 件 ， 并且 有 权限 调用 诸如 地 理 位 置 、 通 知 推送 、 加 速 右 数据 、 设 备 振动 等 大 量 原生 
工具 。 相 比 在 移动 浏览 器 中 开发 React 详 用 ，React Native 赋 予 了 开发 者 更 多 可 能 。 

这 时 你 可 能 会 觉得 ，React Native 与 Apache 的 Cordova 类 似 。 诚 然 ， 两 者 的 思想 非常 相似 ， 都 
共用 Android 和 iOS 两 个 平台 的 代码 库 。 然 而 ，Cordova 运 行 在 WebView 中 ， 通 过 调用 API 获 得 原生 
级 别 的 功能 。React Native 组 件 会 被 泻 染 成 原生 部 件 ， 可 以 为 移动 应 用 提供 真正 的 原生 体验 ， 而 
Cordova 应 用 在 遇 到 滚动 这 样 高 强度 的 UI 交 互 场景 时 ， 可 能 会 发 生前 省 一 一 这 就 是 React Native 的 
威力 所 在 。 开 发 者 可 以 受益 于 React 声 明 式 UI 的 编程 风格 ; 同时 ， 所 维护 的 用 户 界面 提供 的 极速 
体验 ， 能 够 与 任何 原生 移动 应 用 相 媲 美 。 
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React Native 的 社区 活跃 且 增 长 迅速 , 并 且 已 经 被 Facebook 等 许多 公司 用 于 生产 环境 。 本 书 将 
致力 于 帮助 你 理解 React Native， 以 便 弄 清 React Native 是 否 适 用 于 自己 的 应 用 。 











我 应 该 使 用 React Native 吗 ? 


你 是 否 属 于 小 型 团队 ， 并 且 你 的 团队 想 要 为 iDS 和 Android 两 个 市 场 开 发 应 用 ? 

比 起 为 OS 和 Android 两 个 平台 开发 各 自 的 应 用 ，React Native 可 以 让 你 一 次 性 开发 跨 平 台 应 
用 , 这 样 更 省 时 省 力 。 你 可 以 更 快 地 发 布 应 用 ， 从 而 将 更 多 的 时 间 和 精力 集中 于 用 户 体验 ， 无需 
操心 平台 的 差异 性 。 

你 是 否 正 在 使 用 NodeJS 和 其 他 JavaScript 前 端 技术 ? 

React Native 由 纯粹 传统 的 JavaScript 和 JSX 语 法 编写 。 开 发 React Native 能 让 你 在 不 同 的 应 用 
环境 中 切换 自如 ， 无需 因为 编程 语言 的 不 同 而 改变 开发 环境 。 你 还 可 以 从 npm 以 及 其 他 资源 仓库 
获取 第 三 方 JavaScript 库 用 于 应 用 开发 。 

你 是 否 希 望 ， 无需 等 待 Apple 、Google 或 者 Amazon 的 审核 过 程 ， 就 可 以 为 自己 的 应 用 发 布 更 
新 ? 

微软 的 CodePush 服 务 集 成 了 React Native 的 支持 。 用 React Native 进 行 开发 ， 可 以 直接 把 
JavaScript 更 新 包 部 署 到 应 用 上 , 无 需 等 待 任何 第 三 方 服务 的 审核 。 比 起 正式 发 布 的 流程 , 你 可 以 
更 快 地 修复 bug 和 新 增 特性 ， 并 提供 更 广泛 的 兼容 性 。 

你 是 否 希望 ， 能 够 维护 更 小 的 代码 库 ， 以 便 更 清楚 地 构思 、 更 快 地 发 布 应 用 ? 

React Native 共 用 了 iOS 和 Android 的 代码 库 。 利 用 React Native， 再 小 的 团队 也 能 够 做 更 多 的 
事情 。 除 此 之 外 ，Web 开 发 者 可 以 立刻 加 入 移动 应 用 的 开发 ， 进 而 了 解 移动 端的 原生 环境 。 

值得 使 用 React Native 的 理由 远 不 止 上 述 这 些 。 要 弄 清 React Native 是 否 适合 你 ， 唯 一 的 方式 
就 是 了 解 它 能 够 给 你 带 来 什么 。 本 书 将 会 带 你 过 一 遍 React Native 的 代码 库 ， 并 展示 真实 的 应 用 
是 如 何 开发 出 来 的 。 












































































































































阅读 前 提 

本 书 假定 你 至 少 了 解 基础 的 JavaScript 知 识 ， 并 且 熟 悉 ES2016 语 法 。 不 过 ， 即 使 不 熟悉 这 些 ， 
大 多 数 人 在 阅读 本 书 的 过 程 中 也 能 学 会 。 

阅读 本 书 不 需要 有 React 的 开发 背景 。React Native 和 React 不 同 但 存在 交集 ， 书 中 将 会 详细 描 
述 它们 相关 的 部 分 。 
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本 书 内 容 


本 书 将 指导 你 如 何 开始 编写 React Native 应 用 ， 书 中 通过 几 个 企业 应 用 的 实例 ， 让 你 对 当今 
业界 如 何 使 用 React Native 有 一 些 认识 。 

第 1 章 简要 概述 移动 应 用 开发 的 现状 ， 并 介绍 React 和 React Native 的 诞生 。 第 1 章 将 介绍 JSX 
语法 以 及 在 React Native 应 用 运行 的 过 程 中 发 生 了 什么 ， 然 后 介绍 一 些 React Native 组 件 以 及 它们 
的 生命 周期 和 能 力 ， 此 外 还 有 部 署 过 程 与 原生 模块 的 使 用 。 

第 2 章 涉 及 原生 组 件 的 方方面面 : 用 JavaScript、Java 和 Objective-C 创 建 自 定义 原生 组 件 ; 从 
组 件 、 常 量 、 事 件 中 进行 异步 调用 ; 链接 第 三 方 库 。 

第 3 章 介绍 Myagi 应 用 。Myagi 为 零售 销售 人 员 提 供 训 练 平 台 。 你 在 了 解 Myagi 的 过 程 中 会 接 
触 到 Marty.js 、 深 度 链接 以 及 环境 配置 。 本 章 将 带领 你 实现 一 个 自 定义 的 构建 脚本 ， 以 及 学 习 如 
何在 iOS、Android、Web 应 用 之 间 共 享 代码 。 最 后 介绍 维护 无 bug 移 动 应 用 至 关 重 要 的 一 环 
测试 与 质量 保证 ， 同 时 还 将 提 到 CodePush 服 务 。 

第 4 章 介 绍 基 于 位 置 的 移动 聊天 应 用 TinyRobot。 你 将 学 到 用 Flow 进 行 静 态 类 型 检查 ， 接 着 学 
习 Flux、Redux、MobX 以 及 它们 的 异同 点 , 还 将 学 习 依 赖 注入 、 持 久 化 以 及 应 用 状态 管理 。 由 于 
React Native 是 无 结构 化 的 ， 本 章 会 带 你 了 解 一 些 设计 模式 ， 以 及 如 何 从 UI 中 分 离 业务 逻辑 ， 还 
有 如 何 实现 UI 测 试 。 

第 5$ 章 介绍 Fixt, 它 同 时 为 普通 消费 者 和 企业 客户 提供 手机 维修 贵宾 服务 。 通 过 讲解 一 系列 基 
于 React Native 的 解决 方案 ， 本 章 将 指导 你 利用 React Native 实 现 特定 的 用 途 ， 并 学 习 Fixt 提 供 的 
React Native 设 备 参 数 包 。 你 还 将 了 解 到 Fixt 用 React Native 实 现 的 Digits (Twitter 的 认证 系统 解决 
方案 )。 本 书 最 后 会 给 出 进一步 学 习 React Native 的 建议 ， 并 告诉 你 遇 到 难题 时 去 何 处 寻求 帮助 。 






















































































代码 示例 


全 书包 含 大 量 的 代码 示例 ， 书 中 的 JavaScript 代 码 示 例 用 ES2016 语 法 编写 ， 必 要 之 处 还 附 有 
注释 。 





关于 作者 


Isaac Madwed 是 一 名 全 栈 工 程 师 ,就 职 于 Fixt，Fixt 是 一 家 提供 手机 维修 贵宾 服务 的 国际 化 公 
司 , 总 部 位 于 美国 马里 兰州 的 巴尔 的 摩 市 。 他 平时 热衷 于 使 用 机 器 学 习 来 控制 艺术 创作 过 程 ， 并 
且 喜 欢 整 洁 、 模 块 化 .声明 式 的 编程 方式 。 想 要 了 解 更 多 有 关 Fixt 的 信息 , 请 访问 网 站 www .fixt.co。 
想 要 欣赏 Isaac 的 艺术 作品 ， 请 访问 网 站 www.imadwed.com。 


Pavlo Aksonov 是 一 名 就 职 于 Hippware 的 React Native UI 软件 开发 人 员 。 他 是 一 名 活跃 的 开源 
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贡献 者 ， 开 发 了 React Native 路 由 库 Flux 以 及 许多 其 他 组 件 。Pavlo 关 注 软件 架构 设计 ， 并 有 超过 
1 年 的 Web 和 移动 端 开 发 经 验 。 你 可 以 通过 Twitter ( @AksonovP ) 与 他 联系 。 工 作 之 余 ，Pavlo 
喜欢 打 乒 乓 球 。 

Alexander McLeod 是 销售 人 员 在 线 训练 平台 Myagi 的 CTO。 加 入 Myagi 之 前 , 他 取得 了 墨尔本 
大 学 的 计算 和 软件 系统 学 位 ， 并 曾 在 多 家 创业 公司 任职 CTO。Alex 大 部 分 时 间 都 在 用 JavaScript 
和 Python 编 写 Web 和 移动 应 用 。 工 作 之 余 ， 他 喜欢 研究 VR 项 目 、 创 作 音 乐 、 打 篮球 以 及 滑雪 。 你 
可 以 通过 Twitter ( @amcleodio ) 与 他 联系 。 

Arjun Komath 来 自 印 度 , 他 不 仅 拥有 计算 机 工程 本 科学 历 , 还 是 一 名 精通 多 门 语言 的 程序 员 。 
过 去 两 年 内 , 他 一 直 与 Web 和 移动 端 技 术 打 交道 ,同样 , 他 也 是 一 名 活跃 的 开源 贡献 者 。 他 用 React 
Native 开 发 了 Product Hunt 的 开源 Android 客 户 端 Feline。 本 书 第 1 章 由 Arjun 执 笔 ， 你 如 果 有 任何 疑 
问 ， 可 以 通过 Twitter( @arjunz ) 请 教 他 。 

Atticus White 就 职 于 波士顿 的 Robin Powered 公 司 ， 是 一 名 React Native 、Angular 以 及 NodeJS 
开发 人 员 。 该 公司 的 产品 Robin 致 力 于 让 预订 会 议 室 更 加 简便 ， 可 以 将 Robin 看 成 办 公 室 版 的 
OpenTable。 他 业余 时 间 嘉 欢 在 实验 室 里 研究 开源 项 目 并 探索 JavaScript 的 世界 。 想 要 了 解 更 多 有 
关 Robin Powered 的 信息 ,请 访问 网 站 www.robinpowered.com。 想 要 了 解 Atticus 的 更 多 信息 , 请 访 
问 网 站 atticuswhite.com 或 者 通过 Twitter( @atticoos ) 与 他 联系 。 

























































































扫描 如 下 二 维 码 ， 即 可 购买 本 书 电子 版 。 
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用 JavaScript 开 发 移动 应 用 











移动 应 用 程序 ( 简称 移动 应 用 ) 是 专门 为 智能 手机 和 平板 电脑 这 样 的 小 型 移动 设备 开发 的 软 
件 应 用 , 它们 不 用 于 台式 计算 机 或 笔记 本 电脑 。iOS 的 App Store 、Android 的 Play Store 等 应 用 商店 
拥有 数 百 万 的 移动 应 用 ， 截 至 2015 年 6 月 ， 仅 App Store 上 移动 应 用 的 下 载 量 就 超过 了 1000 亿 。 这 
些 惊 人 的 数字 表明 应 用 市 场 一 直 在 持续 扩张 和 发 展 , 这 种 情况 也 使 得 应 用 开发 领域 对 软件 开发 者 
产生 了 特殊 的 吸引 力 。 开 发 移动 应 用 时 ， 有 多 种 技术 可 供 选 择 。 对 于 原生 应 用 ,最 普遍 的 做 法 就 
是 为 特定 的 平台 做 原生 的 开发 : 比如 Apple 的 OS、Google 的 Android, 以 及 Windows Phone 等 平台 。 
除 此 以 外 ,我 们 还 可 以 开发 混合 应 用 ,以 及 只 能 在 移动 浏览 器 中 运行 的 简单 Web 应 用 。 本 章 将 对 
这 些 技术 进行 比较 ， 帮 助 你 理解 为 什么 应 该 考虑 React Native 这 个 可 以 用 JavaScript 和 React 开 发 原 
生 移 动 应 用 的 框架 。 


开发 移动 应 用 没有 开发 Web 应 用 那么 简单 。 我 们 要 面 对 好 几 个 独立 的 平台 (iOS、Android 等 )。 
这 些 平台 的 编程 语言 、 原 生 组 件 和 应 用 架构 等 都 不 一 样 。 由 于 这 些 差异 , 即使 是 相当 有 经 验 的 iOS 
开发 者 , 可 能 也 无 法 开发 Android 应 用 , 因为 Android 的 生态 系统 对 于 他 而 言 完 全 是 一 个 新 的 领域 。 


如 果 你 是 OS 或 Android 原 生 应 用 的 开发 者 ， 在 开发 过 程 中 很 可 能 会 遇 到 以 下 儿 种 情况 。 


口 编译 应 用 : 即使 每 次 的 改动 都 非常 小 ， 也 需要 重新 打包 整个 应 用 ， 才 能 在 模拟 器 或 者 真 
实 设备 上 看 到 结果 ， 这 个 过 程 严重 拖 慢 了 整个 开发 进度 。 
口 原生 并 不 简单 : 就 算 定 义 视图 或 布局 这 么 简单 的 操作 ， 也 需要 大 量 的 代码 。 
口 一 次 只 能 给 一 个 平台 开发 : Android 应 用 无 法 在 iOS 上 运行 , 反之 亦 然 。 因 此, 为 了 给 多 个 
移动 平台 开发 应 用 ， 你 需要 掌握 不 同 的 技术 栈 和 工具 集 ， 而 这 一 切 只 是 为 了 写 出 一 模 
样 的 应 用 。 
口 更 新 缓慢 : 想象 一 下 这 种 场景 ， 你 在 生产 环境 中 发 现 了 一 个 pug， 尽 管 经 过 调试 并 找到 了 
解决 方法 ， 你 也 没 办 法 将 补丁 魔法 般 地 推送 给 下 载 过 应 用 的 用 户 。 你 不 得 不 煞费苦心 地 
打包 应 用 、 签 名 ， 最 后 把 更 新 提交 给 应 用 商店 。 更 新 包 上 架 到 应 用 商店 之 前 ， 所 有 用 户 
会 一 直 受 bug 困 扰 ， 由 于 应 用 市 场 政策 的 制约 ， 我们 对 这 种 状况 无 能 为 力 。 
以 上 这 些 都 表明 , 产品 开发 过 程 不 但 缓慢 ， 而 且 代 价 昂贵 。 但 原生 并 没有 坏处 ， 从 性 能 角度 
来 看 , 原生 应 用 是 最 好 的 选择 , 它们 的 UI 风格 更 统一 , 并 且 视 觉 和 使 用 体验 与 整个 平台 融 为 一 体 。 
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2 第 1 章 用 JavaScript 开发 移动 应 用 





简 而 言 之 ,原生 应 用 非常 棒 ， 但 要 付出 一 定 代价 。 

为 了 解决 上 述 问 题 ， 业 界 已 经 有 了 多 种 尝试 ， 最 流行 的 方式 便 是 用 HTML、CSS 和 JavaScript 
等 Web 技 术 开 发 移动 应 用 。 所 有 移动 平台 都 有 浏览 器， 因此 可 以 运行 任何 Web 应 用 。 这 种 尝试 很 
不 错 , 但 并 非 最 佳 解决 方案 。 这 些 所 谓 的 “混合 ”应 用 开发 起 来 更 简单 ， 可 以 多 平台 运行 并 且 不 
需要 学 习 Objective-C 或 Java。 开发 者 的 美梦 成 真 , 但 这 样 的 应 用 对 用 户 不 友好 。 这些 应 用 不 好 用 ， 
至 少 大 部 分 都 不 好 用 ! 与 原生 应 用 相 比 , 混合 应 用 运行 起 来 很 乙 ， 用 户 界面 以 及 用 户 体验 都 很 粳 
糕 ， 而 且 在 用 户 体验 方面 与 原生 应 用 完全 没有 可 比 性 。 

这 时 就 轮 到 救星 React Native 登 场 了 。 它 在 两 个 领域 都 是 最 好 的 选择 。 在 接 下 来 的 章节 中 ， 
你 将 会 看 到 ，React Native 把 Web 开 发 和 原生 开发 完美 地 结合 到 一 起 。 在 开始 编写 React Native 应 
用 的 壮丽 旅程 之 前 , 先 来 了 解 一 些 构成 React Native 的 基础 概念 , 搞 清 楚 Facebook 如 何以 及 为 何 要 
开发 React Native。 



























































1.1 过 去 


在 ReactNative 之 前 ， 有 Cordova ( 前 身 为 PhoneGap ) 和 Ionic 这 样 的 跨 平台 应 用 开发 框架 ， 这 
些 框架 可 以 演 染 JavaScript、HTML 和 CSS 所 编写 的 WebView。 这 些 应 用 没有 权限 调用 平台 的 特定 
组 件 , 而 是 用 HTML、CSS 和 JavaScript 模 拟 这 些 组 件 。 以 Android 平 台 的 导航 抽 必 为 例 ， 它 有 很 多 
基于 Web 的 实现 ,但 没有 一 个 能 达到 完美 的 原生 体验 (如 酷 炫 的 汉堡 包 菜 单 翻 转动 画 
http://i.stack.imgur.conytErny.gif )， 总 是 存在 某 些 缺陷 。 用 户 体 验 以 及 应 用 的 整体 质感 不 可 能 像 那 
些 为 宿主 平台 原生 编写 的 应 用 一 样 优秀 。 从 性 能 角度 看 ， 原 生 应 用 可 以 多 线程 运行 ， 而 Web 平 台 
的 一 切 只 能 在 主线 程 上 运行 。 原 生 应 用 对 手势 的 处 理 更 加 完善 。 这 样 的 对 比 不 胜 枚 举 。 





















































1.2 现状 
React Native 起 源 于 2013 年 夏天 的 一 次 黑客 马拉松 项 目 。 下 面 是 引 自 Facebook 的 一 段 话 。 





React Native 的 思想 便 是 , 我们 能 够 把 Web 开 发 中 各 种 深 受 开发 者 喜爱 的 东西 带 到 移 
动 开发 领域 , 比如 快速 和 迭代、 用 一 支 团 队 开 发 整 条 产品 线 。 这 就 意味 着 我 们 能 做 得 更 快 。 


在 React Native 逛 生 的 早期 阶段 ， 用 它 开 发 的 首 批 项 目 之 一 是 个 新 闻 订 阅 应 用 的 原型 。2014 
年 7 月 ，Facebook 工 程 师 想 要 为 广告 管理 开发 一 个 独立 版 本 的 OS 应 用 , 唯一 的 难题 在 于 广告 团队 
里 没有 一 个 工程 师 有 iOS 开 发 经 验 。 他 们 发 现 React Native 是 当时 的 完美 选择 ， 尽 管 那 时 它 还 处 于 
原型 阶段 。 接 下 来 的 数 月 ，Ads Manager 产 品 团队 和 React Native 团 队 合作 开发 了 第 一 个 完全 
React Native 驱 动 的 应 用 ， 它 的 体验 与 原生 iOS 应 用 一 样 棒 。 


这 个 iOS 应 用 的 成 功 使 他 们 突破 了 正在 构建 的 产品 的 极限 ， 接 着 他 们 在 伦敦 创立 了 React 
Native Android 团 队 。 他 们 想 要 iOS 版 Ads Manager 的 代码 在 Android 上 运行 , 而 且 真 的 做 到 了 。2015 
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1.3 React 的 起 源 3 

















年 1 月 ，Android 版 Ads Manager 的 可 用 原型 开发 完成 ， 尽 管 这 个 应 用 从 性 能 角度 来 看 还 不 够 好 ， fa 
少 了 很 多 特性 ， 但 它 证 明了 未 来 有 React Native 的 用 武之 地 。 

2015 年 1 月 的 Reactjs 大 会 ，React Native 的 首 个 公开 预览 版 亮相 ( https://www.youtube.com/ 
watch?v=KVZ-P-ZI6W4 )。2015 年 3 月 的 F8 开 发 者 大 会 ，Facebook 把 它 开源 提供 给 所 有 人 。 


2015 年 2 月 Facebook Ads Manager 的 OS 版 发 布 , 接着 2015 年 6 月 他 们 又 发 布 了 Android 版 的 Ads 
Manager。 令 人 吃惊 的 是 ， 这 两 个 应 用 共享 了 约 85% 的 源 代码 。 

如 今 ，React Native 迅 速 被 人 们 接纳 ， 这 一 点 业界 有 目 共 睹 ， 它 已 成 为 最 好 的 跨 平 台 原 生 移 
动 应 用 开发 框架 之 一 。2016 年 F8 大 会 期 间 , 微软 和 Facebook 共 同 宣布 , ReactNative 新 增 了 对 通用 
Windows 平 台 ( UWP ) 的 支持 (https://blogs.windows.com/buildingapps/2016/04/13/react-native-on- 
the-universal-windows-platform/#O25TpvFJPKjSS672Z.99 )， 这 意味 着 你 可 以 用 React Native 为 
Windows Phone、 个 人 计算 机 甚至 Xbox 和 HoloLens 开 发 应 用 。 


据 我 们 所 知 ，React Native 并 不 是 首 个 用 Web 技 术 开 发 移动 应 用 的 框架 , 但 什么 原因 让 它 从 现 
有 的 框架 中 脱颖而出 并 做 得 更 好 呢 ” 为 了 理解 这 些 问题 ， 需 要 对 React 进 行 深入 的 探究 。 
































1.3 ”React 的 起 源 


React， 这 个 用 于 构建 用 户 界 面 的 JavaScript 库 ， 就 是 React Native 的 核心 。 为 了 理解 React， 先 
要 熟悉 几 个 概念 。 第 一 个 概念 , 声明 式 编程 范式 ( 范式 就 是 计算 机 程序 架构 与 组 件 的 构建 风格 )， 
用 这 种 范式 表达 计算 逻辑 时 不 需要 描述 控制 流程 。 简 单 地 说 , 声明 式 编程 就 是 你 编写 代码 描述 想 
要 做 什么 ， 而 不 是 怎么 做 。 
第 二 个 概念 , 异步 , 大 多 数 JavaScript 开 发 者 已 经 很 熟悉 。 同 步 是 指 “ 按 顺序 执行 一 段 代 码 ”， 
代码 语句 一 行 接 一 行 地 执行 。 这 意味 着 每 行 代 码 都 要 等 待 前 一 行 执行 完成 。 异 步 代 码 让 代码 语句 
从 主 程序 流程 中 脱离 ， 主 程序 代码 在 异步 调用 之 后 立即 继续 执行 ， 而 无 需 等 待 异步 代码 完成 。 


React 具 有 声明 式 、 蜡 步 、 响 应 式 的 特性 ， 使 代码 可 预测 ， 并 让 我 们 更 有 把 握 进 行 
快速 迭代 。 





































































































1.3.1 为 什么 选择 React 


HTML 编写 的 Web 应 用 中 有 文档 对 象 模型 DOM。DOM 通 过 对 象 的 形式 来 展现 结构 化 文档 。 
对 于 Web 开 发 者 来 说 ， 文 档 即 HTML 代 码 ，DOM 又 称 作 HTML DOM，HTML 的 元 素 在 DOM 中 叫 
节点 。Web 浏 览 器 负责 处 理 DOM 的 具体 实现 , 并 提供 API 接 口 以 便 对 DOM 进 行 遍历 和 修改 。 这 样 
我 们 就 能 用 JavaScript 和 CSS 与 DOM 交 互 ， 比 如 查找 节点 并 修改 内 容 、 移 除 节点 、 插 入 新 节点 。 
无 论 何 时 想 要 动态 改变 网 页 内 容 , 只 要 通过 API 接 口 修改 DOM 即 可 (如今 的 DOM API 几 乎 实现 了 
跨 平台 和 跨 浏览 器 的 兼容 性 )。 
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不 过 ， 关 键 问题 在 于 DOM 没 有 对 动态 创建 UL 进行 优化 。 尽 管 可 以 用 JavaScript 和 jQuery 库 操 
作 DOM，, 但 大 量 的 操作 就 会 引发 性 能 问题 。 那 么 React 是 如 何 解 决 这 个 难题 的 呢 ? 


React 的 开发 者 采取 了 虚拟 DOM 的 做 法 ， 虚 拟 DOM 更 加 轻 量 ， 对 真实 DOM 进 行 了 抽象 化 ， 
而 且 独 立 于 特定 浏览 器 的 具体 实现 。 每 当 触发 需要 改变 DOM 的 事件 时 ，React 会 创建 一 个 新 的 虚 
拟 DOM 树 ， 并 将 其 与 已 有 的 树 进行 对 比 ， 计 算出 最 少 的 DOM 变 化 集合 ， 把 它们 放 入 队列 再 全 部 
批量 执行 ， 接 着 重新 泻 染 视图 。 这 种 做 法 没有 把 重负 荷 操作 全 部 加 在 真实 DOM 上 ， 因 此 比 直接 
操作 DOM 快 了 很 多 。React 的 这 种 行为 没有 采用 脏 数 据 检 查 ( dirty checking, 持续 检测 模型 变动 )， 
而 是 利用 观察 者 模型 进行 变动 检测 ， 通 过 差分 算法 ( diffing algorithm，http://calendar.perfplanet. 
com/2013/diff/ ) 判断 最 少 的 DOM 操 作 ， 因 此 很 有 效率 。 

































































React 为 可 变 命令 式 DOM 接 口 编程 提供 了 声明 式 封 装 。 上 声明 式 的 编程 方法 只 需 描述 
程序 应 该 达成 什么 目的 ,而 不 用 关心 程序 应 该 怎么 运行 。 然 而 命令 式 编程 需要 逐步 编写 
程序 ， 将 输入 值 计 算 成 期 望 的 输出 。 


口 开发 简单 ， 声 明 式 编程 : 只 需 告 诉 React， 你 希望 应 用 长 成 什么 样 。 按 照 设 计 稿 编写 声明 
式 视 图 ,定义 应 用 的 状态 。React 会 根据 应 用 状态 ， 仅 更 新 、 泻 染 对 应 的 组 件 ,非常 高 效 。 
这 让 代码 的 编写 和 维护 变 得 非常 容易 ， 同 时 更 具 可 预测 性 ， 更 容易 调试 。 

口 组 件 化 开发 : Facebook 宣 称 ,“ 用 了 React， 你 只 需要 开发 组 件 ”。 开 发 一 整套 组 件 ， 再 把 
它们 拼装 成 应 用 。 


现在 我 们 知道 了 React 是 什么 ， 接 下 来 简要 了 解 一 下 这 些 魔法 背后 的 原理 。 















































1.3.2 ”React 的 工作 原理 


编写 React 应 用 的 首要 任务 便 是 开发 组 件 ， 组 件 属于 视图 部 分 ， 同 时 也 定义 了 应 用 状态 ， 而 
数据 层 内 容 取决 于 当前 泻 染 的 视图 。 
口 将 UI 拆 解 成 组 件 : 组 件 驱 动 开发 ， 是 指 将 代码 拆 分 成 组 件 ， 理 论 上 组 件 只 负责 一 件 事 。 
有 个 很 简单 的 技巧 ， 称 为 单一 职责 原则 (the single responsibility principle )， 指 一 个 组 件 理 
论 上 只 应 该 做 一 件 事 。 如 果 组 件 需要 进一步 扩展 ， 就 应 该 将 它 拆 解 成 更 小 的 子 组 件 。 这 
样 可 以 让 代码 更 容易 理解 、 维 护 和 测试 。 
口 交互 式 UI: 要 使 UI 具有 交互 性 ， 你 需要 触发 UI 背后 的 数据 模型 的 改变 。React 中 通过 状态 
很 容易 做 到 这 点 。 每 个 组 件 拥有 内 部 状态 、 逻 辑 、 事 件 处 理 器 〈 如 点 击 按钮 和 改变 表单 
输入 )， 也 可 以 包含 行内 样式 。 一 旦 状态 发 生 了 改变 ，React 就 重新 泻 染 视图 。 
需要 注意 的 是 ，React 有 两 种 类 型 的 数据 “模型 ”: 属性 (props， 英 文 properties 的 简写 ) 和 状 
态 (state )。 弄 清 两 者 的 区 别 很 重要 。 简 而 言 之 ， 如 果 组 件 有 时 候 需 要 修改 自身 的 某 个 特性 ， 那 
么 这 个 特性 应 该 归 类 于 组 件 状态 的 一 部 分 , 除 此 以 外 便 是 组 件 的 属性 。 属性 可 以 比 作 组 件 的 静态 
数据 ， 而 状态 是 动态 的 ， 不 过 两 者 都 可 以 触发 重新 演 染 。 
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现在 我 们 知道 了 React 的 工作 原理 ， 接 着 继续 了 解 一 下 同样 的 概念 如 何 打造 出 React Native。 ne 





1.4 为 什么 选择 React Native 


React 最 神奇 的 地 方 在 于 , 它 被 设计 成 能 对 任意 的 命令 式 视 图 系统 进行 封装 , 不 仅 限于 DOM。 
此 Facebook 的 工程 师 某 天 就 想到 ， 为 什么 不 用 React 来 封装 真正 的 原生 移动 UI 呢 ?React Native 
就 这 人 么 诞生 了 ! 

正如 React 用 虚拟 DOM 产 生 的 魔法 一 样 ，React Native 通 过 原生 宿主 平台 的 API 也 实现 了 一 样 
的 效果 。React Native 应 用 借助 宿主 平台 上 Objective-C 语 言 (iOS 平 台 ) 或 Java 语 言 ( Android 平 台 ) 
的 UI 库 ， 泻 染 真正 的 原生 UI 组 件 ， 不 仅 限 于 WebView， 这 就 解释 了 为 何 React Native 能 给 应 用 带 
来 更 强 的 性 能 、 更 贴近 原生 的 视觉 感受 以 及 使 用 体验 。 


React Native 允 许 开发 者 通过 JavaScript 函 数 的 代理 ， 直 接 调用 原生 模块 。 


从 性 能 角度 上 分 析 ，React Native 把 所 有 应 用 代码 和 业务 逻辑 从 主线 程 转移 到 后 台 线 程 运 行 。 
它 可 以 批量 处 理 要 原生 执行 的 请 求 ， 等 控制 权 转让 给 主线 程 时 再 异步 执行 。React Native 会 分 析 
你 的 UI， 将 最 少 的 数据 传 给 主线 程 〈 又 称 UI 线 程 ) 以 便 用 原生 组 件 进行 泻 染 。 


使 用 React Native， 你 会 得 到 原生 的 用 户 体验 以 及 Web 的 开发 体验 。 


口 简单 易学 : 如 果 你 曾经 开发 过 移动 端 ， 你 可 能 会 惊讶 于 React Native 如 此 简单 易 用 。 

口 快速 迭代 : 不 用 等 待 应 用 构建 ， 只 要 按 下 刷新 快捷 键 ， 所 有 改动 会 立刻 在 应 用 中 呈现 。 
口 智能 调试 : 与 React 一 样 ，React Native 也 会 在 报错 时 抛 出 简明 扼要 的 描述 信息 。 

口 原生 模块 : React Native 的 设计 目的 就 在 于 ， 让 你 能 够 编写 真正 的 原生 代码 ， 并 在 自 定 义 
原生 模块 的 帮助 下 获得 平台 提供 的 完整 能 力 。 

D 一 次 性 学 习 ， 全 平台 开发 : 同一 支 工程 师 团 队 可 以 为 任何 平台 开发 应 用 ， 不 需要 为 每 个 
平台 学 习 不 同 的 基础 技术 。 
















































































1.5 ”React Native 的 工作 原理 


原生 代码 与 JavaScript 代 码 通 过 桥接 层 进行 交互 , 这 是 一 个 异步 的 批量 串 行 处 理 过 程 。 桥接 层 
介 于 原生 层 和 JavaScript 代 码 之 间 ， 正 如 它 的 名 称 一 样 ， 它 的 作用 很 像 桥 (bridge )。 用 户 输入 、 
计时 器 、 网 络 请 求 和 响应 等 事件 注册 在 原生 代码 中 。React Native 在 原生 层 收 集 事件 产生 的 数据 ， 
串 行 处 理 后 通过 桥接 层 传 给 JavaScript 层 。JavaScript 层 拿 到 数据 后 处 理 并 生成 一 系列 指令 。 这 些 
指令 由 整 型 、 字 符 串 等 数据 类 型 构成 ， 同 样 经 过 批量 串 行 处 理 后 传 回 原生 层 。 桥 接 层 的 原生 端 决 
定 哪 个 原生 模块 负责 处 理 传 回 的 指令 并 调用 相应 的 方法 , 同时 在 需要 的 情况 下 更 新 UI。 这 种 架构 
提升 了 React Native 应 用 的 性 能 ， 并 且 让 React Native 应 用 能 以 每 秒 60 帧 的 速率 运行 。 
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原生 事件 于 更 新 UI 

收集 数据 传 给 JS 层 处 理 命令 
桥接 层 

串 行 化 的 有 效 负载 串 行 化 的 响应 
JavaScript 


处 理事 件 二 一 一 依 调用 原生 方法 











React Native 需 要 通过 JavaScript 执 行 环境 运行 JavaScript 人 代码。 在 iOS 和 Android 系 统 的 模拟 器 
以 及 设备 上 ，React Native 使 用 Safari 的 JavaScript 引 擎 JavaScriptCore ( http://trac.webkit.org/wiki/ 
JavaScriptCore )。 通 过 Chrome 调 试 ReactNative 时 ，JavaScript 代 码 会 在 Chrome V8 引 警 内 运行 ， 并 
通过 WebSocket 与 原生 代码 进行 交互 。React Native Windows 应 用 的 JavaScript 运 行 环境 是 Chakra 
(微软 Edge 浏 览 器 的 JavaScript 引 擎 https:/github.com/MicrosofVChakraCore )，UWP (通用 Windows 
平台 ) 应 用 包 不 需要 添加 任何 额外 的 二 进 制 文件 就 可 以 使 用 Chakra 引 警 。 

















运行 React Native 应 用 时 发 生 了 什么 
下 面 来 看 看 React Native 应 用 启动 时 发 生 了 什么 。 启 动 应 用 时 有 以 下 三 个 任务 并 行 完 成 。 


口 加 载 JavaScript 打 包 文件 ，React Native 的 打包 工具 会 像 Webpack 和 了 Browserify 一 样 把 代码 
连同 全 部 依赖 打包 成 单个 文件 。 

口 与 此 同时 ，React Native 开 始 加 载 原生 模块 。 一旦 某 个 原生 模块 完成 加 载 就 在 桥接 层 注册 ， 
桥接 层 确认 该 模块 。 此 时 整个 应 用 便 知道 该 模块 已 可 用 并 能 创建 该 模块 的 实例 。 

口 启动 JavaScript 虚 拟 机 ， 提 供 JavaScript 代 码 的 执行 环境 。 


一 旦 原生 模块 和 JavaScript 执 行 环 境 准 备 就 绪 ， 应 用 就 会 加 载 JSON 配 置 文件 。 配 置 文件 中 包 
含 了 模块 数组 、 常 量 导出 模块 以 及 模块 的 方法 。 这 个 文件 的 重要 之 处 在 于 ， 当 你 请 求 依赖 的 原生 
模块 并 调用 方法 时 ，JavaScript 会 读 取 它 并 在 执行 环境 中 创建 对 象 。 

下 一 步 ， 执 行 JavaScript 打 包 文件 。 创 建 Shadow 视 图 ( 负责 计算 布局 的 独立 线程 称 为 shadow 
队列 ) 来 演 染 应 用 的 布局 。Shadow 队 列 把 flexbox 这 样 的 属性 转换 成 绝对 位 置 和 大 小 。 与 此 同时 ， 
创建 原生 视图 来 泻 染 应 用 。 最 后 结合 两 者 将 整个 应 用 泻 染 到 屏幕 上 。 
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现在 来 考虑 一 下 应 用 中 触发 事件 或 者 发 生 交 互 的 情况 。iOS 系 统 的 UIKit 会 识别 触发 的 事件 ， 
并 通过 原生 模块 把 事件 分 发 给 React ( 传 给 JavaScript 层 )。JavaScript 捕 获 事件 后 会 调用 对 应 的 事件 
处 理 器 。 如 果 事 件 处 理 需 需要 再 次 调用 原生 组 件 ， 将 通过 桥接 层 调 用 原生 组 件 方法 。 


需要 补充 的 是 ，iOS 系 统 所 有 的 原生 模块 有 各 上 自 的 线程 池 (GCD 队 列 )， 而 Android 系 统 的 模 
块 共 享 同一 个 线程 池 ， 但 两 者 的 原生 模块 线程 池 都 脱离 于 主线 程 存在 。 

以 上 对 React Native 工 作 原理 的 解释 还 处 于 很 高 的 层级 ， 在 底层 执行 过 程 中 实际 上 还 有 很 多 
优化 和 动态 的 过 程 。 




































































1.6 局 限 性 


React Native 在 很 多 方面 都 十 分 神奇 ， 但 凡事 总 有 缺憾 。 它 仍然 处 于 早期 阶段 ， 尚 未 发 布 稳 
定 版 ，API 也 一 直 在 变动 。 尽 管 Facebook 在 生产 环境 中 使 用 它 已 经 有 一 段 时 间 ， 但 如 果 要 问 它 是 
否 已 经 准备 好 用 于 生产 环境 ， 我 们 无 法 给 出 肯定 的 答复 。 根 据 我 们 使 用 React Native 的 经 验 ， 应 
用 有 时 能 运行 得 很 棒 ， 不 过 它 确 实 会 发 和 后 一 些 没 人 能 和 弄 清 楚 的 问题 。 

React Native 项 目 自 2015 年 开源 以 来 ， 就 引起 了 业界 的 高 度 关注 。 























1.7 ”开发 第 一 个 React Native 应 用 


我 们 将 在 本 节 学 习 如 何 用 React Native 开 发 一 个 简单 的 应 用 。 首 先 来 了 解 一 些 基 础 概念 ， 熟 
悉 了 这 些 概念 之 后 即 可 开始 编程 。 

















1.7.1 ”JSX 一 一 JavaScript 语法 扩展 

用 React 开 发 时 ,我 们 在 render 方 法 中 用 JSX 语 法 代替 JavaScript 函 数 。JSX 是 看 起 来 与 XML 类 
似 的 JavaScript 语 法 扩展 。 它 让 编码 更 加 方便 ， 尤 其 是 对 那些 Web 技 术 开 发 者 而 言 。 与 XML 一 样 ， 
JSX 标 签 包 括 标签 名 (tag name )、 特 性 (attribute ) 以 及 子 元 素 ( children )。 两 侧 加 有 引号 的 特性 
值 是 字符 串 。 除 此 之 外 ,用 花 括 号 括 住 的 值 是 封闭 的 JavaScript 表 达 式 。 

JSX 标 签 实际 上 调用 了 JavaScript 函 数 ， 如 下 所 示 。 

<div prop="someText">Children</div>; 

上 面 的 JSX 标 签 编译 成 JavaScript 后 如 下 所 示 。 


React.createElement("div", { prop: "someText" }, "Children"); 



























































1.7.2 ”状态 和 属性 
1.3.2 节 探讨 过 状态 和 属性 之 间 的 区 别 。 属 性 是 “ 父 组 件 向 子 组 件 传递 数据 的 方式 ”。 为 子 组 
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件 指 定 属 性 并 赋值 后 , 子 组 件 内 就 能 通过 this.props.propName 的 形式 访问 这 些 值 。 要 记 住 子 组 件 
的 属性 由 父 组 件 提供 ， 因 此 它们 不 能 直接 修改 属性 ， 从 组 件 自身 的 视角 来 看 ， 它 的 属性 不 可 变 。 
状态 ， 顾 名 思 义 ， 表 示 应 用 或 组 件 的 状态 。 与 属性 不 同 ， 状 态 是 可 变 的 和 私有 的 ， 并 且 可 以 
被 组 件 自身 修改 。 当 状态 发 生 改 变 时 ，React 会 自动 重新 泻 当 组件。 要 改变 状态 的 值 ， 需 要 调用 
组 件 内 部 的 setState() 方 法 。 
举 个 例子 ,创建 一 个 头 部 组 件 ， 命 名 为 Header。 为 Header 组 件 传递 title 属 性 并 演 染 。 


<Header title="Hello World!" /> 







































































组 件 可 以 通过 this.props.title 来 访问 title 属 性 。 


class Header extends Component { 
render() { 
return ( 
<View> 
<Text>{this.props.title}</Text> 
</View> 
); 
} 
} 


为 了 理解 组 件 的 状态 , 我 们 必须 在 应 用 内 触发 一 个 事件 ， 比 如 用 户 输入 或 者 网 络 请 求 。 下 面 
来 尝试 编写 一 个 简单 的 计数 天 示例 。 


class Counter extends Component { 




















constructor(props) { 
super (props); 
this.state = { 
count: 0 
}; 
} 


componentDidMount() { 
setIntervaL(() => { 
this. setState({ 
count: this.state.count + 1 
}) 
}, 1000); 
} 


render() { 
return ( 
<View> 
<Text>{this.state.count}</Text> 
</View> 
); 
} 
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在 上 面 的 示例 中 ， 我 们 创建 了 一 个 继承 自 React Component 的 Counter 类 ， 并 在 构造 函数 中 初 
始 化 count 状 态 ， 赋 值 为 6。 生命 周期 方法 componentDidMount 在 render 方 法 执行 后 被 调用 。 在 下 一 
个 话题 中 ,我 们 会 讨论 更 多 的 生命 周期 方法 。 在 componentDidMount 方 法 内 调用 setIntervat 函 数 ， 
每 隔 一 秒 让 count 增 加 1。 每 当 count 的 值 递增 时 ，React 会 调用 render 方 法 并 重新 泻 染 UI。 因 此 当 
你 运行 应 用 时 就 会 看 到 计数 器 逐 秒 递 增 ，render 方 法 一 直 对 Text 组 件 内 部 的 值 进 行 更 新 。 











1.7.3 ”React 组 件 生命 周期 


下 面 来 看 一 下 组 件 的 各 个 生命 周期 方法 的 职责 以 及 调用 时 机 。 理解 这 些 方 法 后 , 你 就 会 明白 

应 该 调用 哪个 方法 以 及 该 方法 合适 的 调用 时 机 。 

口 componentWtLLMount: 首次 演 染 之 前 调用 一 次 。 该 方法 在 演 染 之 前 被 调用 ， 因 此 当 你 想 在 

组 件 挂 载 之 前 进行 某 些 操作 时 ， 这 个 方法 很 有 用 。 

口 componentDidMount: 首次 泻 染 之 后 调用 一 次 。 该 方法 用 来 发 起 网 络 请 求 以 及 更 新 状态 。 

通常 用 来 集成 其 他 JavaScript 框 架 和 异步 汝 数 。 

口 componentWillReceiveProps: 该 方法 在 属性 发 生变 化 时 被 调用 , 首次 演 染 过 程 不 会 触发 该 

方法 。 

口 shouldComponentUpdate: 该 方法 可 以 用 来 判定 下 一 步 是 否 应 该 执行 render 方 法 , 也 就 是 决 
定 组 件 是 否 应 该 更 新 ,该 方法 的 返回 值 默 认为 true。 如 果 更 新 状态 或 属性 后 不 想 泻 染 组 件 ， 
可 以 在 该 方法 中 返回 false。 

口 componentWtLLUpdate: 组 件 重新 淀 染 之 前 调用 。 

口 componentDidUpdate: 组 件 重 新 泻 染 之 后 调用 。 

口 componentWtLLUnmount : 组 件 伸 载 之 前 调用 。 






























































1.7.4 样式 


应 用 的 UI 负责 与 用 户 进行 交互 , 因此 它 是 至 关 重 要 的 一 部 分 。 我 们 自然 会 对 那些 UI 惊 艳 的 应 
用 一 见 倾心 。ReactNative 没 有 实现 对 CSS 的 支持 ， 而 是 通过 JavaScript 来 给 应 用 增加 样式 。 你 可 以 
使 用 StyLesheet 对 象 声 明 样式 。 


var styles = StyLeSheet.create({ 
background: { 
backgroundColor: '#222222', 
]， 
active: { 
borderNidth: 2， 
borderColor: '#Ooff00 ' ， 
人 
}); 


口 styleSheet.create 构 造 方 法 不 是 必要 的 ,但 是 它 有 一 些 显著 的 优势 。 它 把 参数 值 转换 成 
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普通 的 数值 ， 数 值 的 引用 指向 一 张 内 部 数据 表 ， 这 样 能 够 保证 参数 值 不 可 变 并 且 不 能 
接 访问 。 

口 把 样式 表 写 在 文件 的 末尾 ， 可 以 确保 样式 只 会 创建 一 次 ， 避 免 应 用 在 每 次 泻 染 的 过 程 中 
都 重复 创建 。 


所 有 核心 组 件 都 接受 一 个 样式 属性 ， 它 们 也 接受 一 组 样式 。 


<Text style={styles.active} /> 
<View style={[styles.active, styles.background]} /> 


数组 形式 的 样式 作用 于 组 件 的 规则 与 object.assign 方 法 一 样 : 如 果 存 在 重 名 的 值 ， 最 右 侧 
的 数组 元 素 拥有 较 高 的 优先 级 ， 同 时 false 、undefined 和 null 这 样 的 假 值 会 被 忽略 。 

我 们 在 React Native 中 用 flexbox 进 行 布局 。flexbox 为 页 面 元 素 的 排列 提供 了 一 种 布局 模式 ， 
它 有 助 于 编写 可 预测 的 UI 布局 ， 以 便 适 配 不 同 的 屏幕 尺寸 和 显示 设备 。 


flexbox 实 质 上 有 以 下 三 个 主要 属性 。 


口 direction 可 以 将 页 面 元素 按 行 ( 水平 排 列 ) 或 者 列 (垂直 排列 ) 的 方向 进行 布局 。 

口 justify-content 可 以 使 用 该 属性 根据 布局 的 主轴 方向 (水平 或 垂直 ， 取 决 于 所 设置 的 
direction 属 性 ) 对 页 面 元 素 进行 对 齐 。 该 属性 有 以 下 五 种 值 : fLex-start， 所 有 弹性 元 
素 对 齐 到 主轴 的 起 始 位 置 ; flex-end， 所 有 弹性 元 素 对 齐 到 主轴 的 结束 位 置 ;center ， 在 
主轴 方向 上 让 所 有 弹性 元 素 居中 ; space-between， 所 有 弹性 元 素 在 主轴 方向 上 等 间距 排 
列 (布局 内 除了 弹性 元 素 以 外 的 剩余 空间 ， 在 元 素 之 间 平 均 分 配 ); space-around， 弹 性 
元 素 的 前 后 以 及 相 邻 元 素 之 间 都 留 有 空间 。 

口 alLign-items 用 来 在 副 轴 方 向 上 对 齐 元 素 ， 副 轴 与 主轴 垂直 。 该 属性 有 以 下 四 种 值 : 

flex-start， 所 有 弹性 元 素 对 齐 到 副 轴 的 起 始 位 置 ，flex-end， 所 有 弹性 元 素 对齐 到 副 轴 

的 结束 位 置 ; center ， 在 副 轴 方向 上 让 所 有 弹性 元 素 居 中 ; stretch， 该 属性 会 拉 伸 弹 性 

元 素 的 尺寸 来 填 满 副 轴 长 度 。 




















































































































1.7.5 ”触摸 事件 的 处 理 


React Native 可 使 用 抽象 实现 的 组 件 TouchableHighlight 和 TouchableOpacity 来 处 理 视图 上 的 
触摸 事件 。 这 两 个 组 件 都 用 来 包装 视图 ， 使 得 它们 可 以 正确 地 响应 点 击 事件 ， 同 时 在 用 户 进 行 
触摸 时 提供 视觉 上 的 反馈 。 男 一 个 组 件 TouchablewithoutFeedback 的 用 途 一 样 ， 只 是 不 提供 视觉 
反馈 。 


<TouchableHighlight onpPress={this._onpressButton}> 
<Text>Press me</Text> 
</TouchableHighlight> 


在 上 面 的 代码 示例 中 ， 当 点 击 文本 Press me 时 ，TouchabtLeHighLight 组 件 将 调用 onPressButton 
函数 ， 我 们 可 以 在 该 函数 中 对 触摸 事件 执行 所 需 的 操作 。 














图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 





1.7 开发 第 一 个 Re 


act Native 应 用 11 





1.7.6 ”网 络 

















如 今 大 多 数 的 应 用 都 需要 与 服务 器 〈 后 端 ) 进行 交互 , 目的 在 于 把 数据 保存 到 数据 库 中 ,对 





用 户 进行 身份 验证 , 启用 通知 推送 等 。 在 React Native 中 我 们 可 以 通过 网 络 的 腻子 脚本 库 ( polyfill ) 





与 服务 器 交互 。 有 三 种 网 络 相关 的 方法 : 用 fetch 方 法 发 起 HTTP 请 求 、 
通信 ， 以 及 XMLHttpRequest (XHR ) 方法 。 





用 WebSocket 进 行 全 双 工 


最 普遍 使 用 的 方法 就 是 fetch, 该 方法 用 于 与 服务 器 API 进 行 交互 。 我 们 来 看 一 个 简单 的 GET 





请 求 。 


fetch('https://httpbin.org/get') 
.then((response) => response.json()) 
.then((responseJson) => { 
console.log(responseJson); 
}) 
.Catch((error) => { 
// 处 理 错误 信息 
console.warn(error); 


}); 














上 面 的 代码 示例 展示 了 一 个 简单 的 HTTP GET 请 求 ， 先 获取 数据 ,是 





了 把 文本 解析 成 JSON ,最 


























后 将 响应 值 输出 到 控制 台 。 需 要 注意 的 是 ，fetch 方 法 返回 一 个 promise， 
catch 以 及 done 方 法 。 


fetch 方 法 也 能 用 ES7 语 法 的 async 和 await 特 性 来 调用 ， 如 下 所 示 。 


class MyComponent extends React.Component { 





async getData() { 
try { 
let response = await fetch('https://httpbin.org/get'); 
Let responseJson = await response.json(); 
return responseJson.users; 
} catch(error) { 
// 处 理 错误 信息 
console.error(error); 
} 
} 


1.7.7 ”深度 链接 





因此 可 以 跟着 调用 then、 


在 开发 应 用 的 过 程 中 ， 你 可 能 会 遇 到 使 用 开放 授权 协议 OAuth 进 行 用 户 身份 验证 的 需求 ,在 
这 种 情况 下 应 用 可 以 代表 你 的 用 户 完成 某 些 操 作 。 为 了 授权 给 用 户 , 首先 我 们 将 被 重 定向 到 登录 
页 面 ， 在 该 页 面 中 用 户 可 以 输入 其 登录 信息 ( 用 户 名 和 密码 )， 同 时 可 以 对 服务 进行 验证 以 代表 
用 户 自身 为 应 用 提供 访问 权限 。 该 服务 会 返回 授权 令 牌 给 应 用 , 以 后 应 用 每 次 访问 服务 时 都 会 附 











华 这 个 令 牌 ， 以 便服 务 端 对 请 求 进行 验证 。 来 看 一 个 例子 。 
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我 们 来 给 Product Hunt 网 站 "开发 一 个 Android 客 户 端 ， 和 希望 应 用 提供 登录 功能 ， 这 样 用 户 就 
可 以 通过 应 用 访问 Product Hunt 的 服务 。 首 先 ， 在 Product Hunt 的 API 控 制 台 页 面 注册 应 用 ， 得 到 
客户 端 ID 以 及 密 钥 (用 于 OAuth 协 议 )。 登 录 过 程 一 开始 ,将 用 户 重 定向 到 身份 验证 页 面 的 URL， 
比如 https:/api.xyz.com/vl/oauth ， 并 在 参数 中 附带 客户 端 卫 以 及 重 定 向 URI。 一 旦 用 户 对 应 用 进 
行 了 验证 ， 服 务 就 会 带领 用 户 前 往 指 定 的 重 定向 URI， 并 附 上 访问 令 牌 。 此 时 深度 链接 就 派 上 用 
场 了 ， 在 它 的 帮助 下 ， 我们 可 以 让 重 定向 URI 直 接 打 开 应 用 ， 于 是 整个 登录 过 程 就 完成 了 。 


深度 链接 通过 统一 资源 定位 符 (uniform resource identifier，URI ) 指向 移动 应 用 内 
部 的 具体 位 置 ， 而 不 仅仅 是 简单 地 启动 应 用 。 


React Native 使 用 Linking 组 件 接受 深度 链接 。 我 们 在 此 将 只 讨论 输入 的 应 用 链接 ， 尽管 
Linking 组 件 所 提供 的 通用 接口 都 能 处 理 输入 和 输出 的 应 用 链接 。 


在 Android 和 iOS 系 统 中 ， 我 们 都 要 改动 原生 代码 来 接受 深度 链接 。 正 如 下 方 Android 应 用 的 
例子 一 样 ， 我 们 按 文档 的 指示 ， 在 manifest 文 件 中 添加 intent filter 过 滤器 。 


<intent-filter android:label="@string/filter_title viewgizmos"> 
<action android:name="android.intent.action.VIEW" /> 
<category android:name="android.intent.category.DEFAULT" /> 
<category android:name="android.intent.category.BROWSABLE" /> 
!-- 接受 以 http://www.example.com/gizmos 开 头 的 URI --> 
<data android:scheme="http" 
android:host="www.example.com" 
android:pathPprefix="/gizmos" /> 
<!-- 注意 : pathPrefix 属 性 值 必须 以 /开头 --> 
!-- 接受 以 exampLe://gizmos 开 头 的 URI --> 
<data android:scheme="example" 
android:host="gizmos" /> 
































</intent-filter> 


如 你 所 见 ， 上 面 的 示例 展示 了 应 用 将 会 接受 以 http://www.example.com/gizmos 和 
example://gizmos 开 头 的 URI。 


iOS 平 台 上 需要 编辑 AppDelegate.m 文 件 。 
当 应 用 通过 注册 的 外 部 URL 启 动 时 ,你 可 以 使 用 Linking 组 件 获 取 该 URL 并 进行 处 理 。 


componentDidMount() { 
var url = Linking.getInitialURL().then((url) => { 
if (url) { 
console.log('Initial url is: ' + url); 








}).catch(err => console.error('An error occurred', err)); 


} 
这 样 就 能 处 理 任何 输入 的 应 用 链接 并 执行 相应 的 操作 。 





























Q@ 这 是 一 个 用 户 可 以 分 享 以 及 发 现 新 产品 的 网 站 ， 网 址 为 https://www.producthunt.com/。 一 一 译 者 注 
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1.7.8 动画 fa 


React Native 内 置 的 动画 API 可 以 创建 流畅 的 动画 ， 提 供 更 佳 的 用 户 体验 。React Native 拥 有 两 
套 动 画 系统 : LayoutAnimation 和 Animated。LayoutAnimation 作 用 于 全 局 ， 对 下 一 次 泻 染 过 程 的 
所 有 变化 应 用 动画 。 与 此 不 同 ，Animated 库 有 丰富 的 配置 项 ， 能 应 用 在 特定 组 件 上 。 请 看 以 下 的 
例子 。 


class SampleApp extends React.Component { 





























constructor(props) { 
super(props); 
this.state = { 
fadeAnim: new Animated.Value(0), 
fadeAnim2: new Animated.VaLue(0) 
}; 
} 


componentDidMount() { 
Animated. timing(this.state.fadeAnim, f{ 
toValue: 1， 
duration: 1000 
}).start(); 
Animated.timing(this.state.fadeAnim2, { 
toValue: 1， 
delay: 1000， 
duration: 1000 
}).start(); 
} 


render() { 
return ( 
<View style={styles.container}> 
<Animated. Text style={styles.welcome, {opacity: this.state.fadeAnim}}> 
Welcome to the React Native! 
</Animated.Text> 
<Animated. Text style={styles.welcome, {opacity: this.state.fadeAnim2}}> 
Im feeling lucky.. 
</Animated.Text > 
</View> 
); 
} 
} 


在 上 面 的 示例 中 ,我们 在 应 用 演 染 完成 后 展示 了 文本 的 淡 入 动画 。 为 了 实现 这 种 效果 , 使 用 
了 React Native 的 Animated APIi 让 不 透明 度 从 0 变 为 1， 这 样 就 实现 了 淡 入 效果 。 

在 构造 郴 数 中 ， 初 始 化 一 个 名 为 fadeAnim: new Animated.Value(0) 的 新 状态 ， 即 一 个 从 0 开 
始 缓 动 的 新 值 Animated.Value。 为 了 实现 淡 入 效果 ， 需 要 让 fadeAninm 值 从 0 变 为 1， 为 此 我 们 使 用 
了 Animated.timing。 它 与 计时 还 类 似 ， 可 以 用 来 定义 持续 一 定时 间 的 动画 。 
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Animated. timing(this.state.fadeAnim, { 
toValue: 1， 
duration: 1000 
}).start(); 
将 需要 应 用 动画 的 值 作 为 参数 传人 ， 比 如 本 示例 中 的 状态 fadeAnim， 同 时 在 另 一 个 参数 内 指 
定 动 画 效果 的 最 终 值 ( tovalue ) 以 及 具体 的 动画 持续 时 间 ( duration )。 上 述 示例 中 fadeAnim 将 
在 1000 上 毫秒 内 从 0 变 为 1。 最 后 ， 我 们 把 它 赋 值 给 动画 组 件 的 样式 。 
<Animated. Text style={styles.welcome, {opacity: this.state.fadeAnim}}> 


Welcome to the React Native! 
</Animated.Text> 


如 上 所 示 , 我 们 已 将 fadeAnim 状 态 附 加 到 Animated.Text 的 不 透明 度 ， 因此 文本 就 产生 了 淡 入 
动画 。Animated.timing 还 可 以 传人 delay 参 数 ， 用 于 控制 动画 在 指定 的 延迟 (单位 为 毫秒 ) 后 再 
开始 执行 。 下 面 的 代码 展示 了 delay 参 数 。 


Animated. timing(this.state.fadeAnim2, { 
toValue: 1， 
delay: 1000, 
duration: 1000 

}).start(); 


在 1000 毫 秒 之 前 ， 不 透明 度 一 直 为 0， 当 延迟 阶段 结束 后 ， 不 透明 度 才 开 始 从 0 变 为 1。 


























1.7.9 调试 与 热 模块 重 载 


利用 Google Chrome 浏览 器 可 以 很 方便 地 调试 React Native 应 用 。 要 进行 调试 ， 打 开 iOS 或 
Android 平 台 Chrome 应 用 内 的 开发 者 菜单 ， 选 择 远 程 调试 JS 选项 。Chrome 浏 览 器 会 打开 新 的 标签 
页 ， 该 页 面 会 与 打包 器 ( 打包 器 为 应 用 提供 JavaScript 打 包 文 件 ) 建立 WebSocket 连 接 。 一 旦 调试 
工具 在 Chrome 内 打开 , 设备 会 请 求 浏览 器 通过 WebSocket 消 息 加 载 应 用 脚本 。 此 时 Chrome 会 新 建 
一 个 <script> 标 签 来 加 载 JavaScript 打 包 文 件 ， 于 是 JavaScript 代 码 就 会 在 浏览 器 中 运行 。 由 于 在 
Chrome 浏 览 器 上 运行 着 与 设备 上 完全 一 样 的 JavaScript 代 码 ， 可 以 利用 Chrome 的 所 有 调试 工具 来 
调试 代码 。 

在 代码 中 写 下 console.log('something')， 内 容 就 会 被 输出 到 Chrome 的 控制 台 上 。 在 代码 中 
插入 debugger; 声 明 ，Chrome 就 会 让 代码 执行 停 在 对 应 的 那 一 行 ， 你 可 以 查看 此 处 的 局 部 变量 、 
全 局 变量 , 或 者 接着 调试 应 用 。 你 也 可 以 使 用 console.warn() 和 console.error()， 把 应 用 内 的 警 
告 和 错误 信息 输出 到 Chrome 中 。 

Facebook 在 版 本 0.22 中 引入 了 热 模块 重 载 (hot module reloading )， 该 特性 可 以 让 应 用 在 处 于 
运行 状态 时 ， 重 新 加 载 你 所 做 的 改动 。Facebook 对 热 重 载 的 介绍 如 下 。 


热 重 载 的 概念 就 是 指 应 用 在 执行 环境 下 运行 时 ， 可 以 直接 注入 编辑 过 的 文件 。 这 样 
在 调整 UI 时 特别 有 用 ， 因 为 任何 应 用 状态 都 不 会 丢失 。 
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1.7.10 ”应 用 监控 

。 性 能 监控 器 

性 能 监控 器 提供 了 一 个 面板 ,， 遮 晶 在 应 用 界面 的 最 上 层 ， 用 于 显示 与 性 能 相关 的 数据 。 第 一 
项 RAM 表 示 为 当前 进程 分 配 了 多 少 内 存 。 第 二 项 JSC 表 示 JavaScript 核 心 堆 内 存 的 大 小 ( 只 有 当 JSC 
在 执行 环境 中 可 用 时 , 这 项 数据 才 会 显示 ),。 第 三 项 Views 表 示 应 用 拥有 的 视图 数量 以 及 当前 屏幕 
上 显示 的 视图 数量 。 第 四 项 UI 表 示 主 线程 帧 率 。 最 后 一 项 JavaScript 表 示 JavaScript 线 程 帧 率 。 依 
靠 这 些 数据 我 们 就 可 以 弄 清 应 用 哪里 存在 性 能 瓶颈 。 

如 果 JavaScript 线 程 的 帧 率 出 现 了 明显 的 下 跌 ， 就 意味 着 JavaScript 代 码 执行 得 很 慢 。 为 了 深 
入 了 解 代码 出 了 什么 问题 ， 就 要 用 到 Systrace 工 具 以 及 CPU 分 析 器 。 

e Systrace 

Systrace 是 以 标记 为 基础 的 性 能 分 析 工 具 ， 这 意味 着 要 在 应 用 内 显 式 添 加 代码 来 获取 性 能 信 
息 。 人 性 能 分 析 代 码 被 开始 /结束 标记 所 包围 ， 并 高 亮 成 彩色 的 语法 格式 。React Native 默 认 会 为 应 
用 以 及 自 定义 模块 注入 一 些 标记 。 同 时 React Native 也 提供 API 用 于 创建 自 定 义 标 记 。 

































































1.8 开始 动手 
我 们 利用 开源 的 电影 数据 库 API 开 发 一 个 简单 的 应 用 ， 用 来 搜索 影片 。 在 开始 之 前 请 确保 安 


装 了 React Native， 如 果 没 有 ， 运 行 sudo npm install -g react-native-cli 命 令 进 行 安装 。Node 
和 npm 是 安装 React Native 的 必 备 条 件 。 


强烈 建议 通过 brew ( macOS 的 包 管理 器 ) 安装 watchman ( 用 于 监视 文件 变化 ) 以 及 flow (用 
于 JavaScript 代 码 类 型 检查 )。 完 成 上 述 准 备 工作 后 ， 就 可 以 运行 react-native init movies 命 令 初 
始 化 一 个 新 的 项 目 。 这 样 会 初始 化 一 个 新 文件 夹 , 包含 了 iOS 和 Android 两 个 平台 的 原始 项 目 文件 
以 及 JavaScript 文 件 。 运 行 cd movies 打 开 项 目 目录 ， 然 后 运行 react-nattive run-ios， 就 能 在 iOS 
模拟 需 中 预览 应 用 。 
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Welcome to React Native! 


To get started, edn indox ios,js 
Press Cmd+R to reload, 
Cmd+*D or shake for dev menu 


来 看 一 下 React Native 生 成 的 JavaScript 代 人 码 样 例 。 


import React, { Component } from 'react'; 
import { 

AppRegistry, 

StyleSheet, 

Text， 

View 
} from 'react-native'; 


示例 一 开始 的 import 声 明 导 入 了 React 以 及 编写 组 件 时 所 要 继承 的 Component 类 。 接 着 显 式 指 
定 要 使 用 哪些 组 件 ， 比 如 Text 和 view， 还 有 我 们 所 需 的 AppRegistry 和 Stylesheet 库 水 数 。 因 此 无 
论 何 时 需要 什么 React Native 组 件 ， 只 要 通过 import 声 明 导 人 即 可 。 
class movies extends Component { 
render() { 
return ( 
<View style={styles.container}> 
<Text style={styles.welcome}> 


Welcome to React Nativel! 
</Text> 
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<Text style={styles.instructions}> 
To get started, edit index.ios.js 

</Text> 

<Text style={styles.instructions}> 
Press Cmd+R to reload,{'\n'} 
Cmd+D or shake for dev menu 

</Text> 

</View> 
); 
} 
} 





const styles = StyLeSheet.create({ 
container: { 
flex: 1， 
justifyContent: "Center ' ， 
alignItems: "center ' ， 
backgroundColor: '#F5FCFF', 
4 
welcome: { 
fontSize: 20， 
textAlign: 'center', 
margin: 10， 
]， 
instructions: { 
textAlign: 'center', 
color: '#333333', 
marginBottom: 5， 
]， 
]); 


接着 创建 一 个 novies 类 ， 继 承 自 React Component。movies 拥 有 render 方 法 , 返回 一 个 由 文本 
构成 的 布局 。 接 着 用 StyLesheet 新 建 一 个 样式 表 , 指定 render 方 法 中 的 组 件 需要 使 用 的 样式 对 象 。 

AppRegistry. registerComponent( 'movies', () => movies); 

最 后 要 用 到 AppRegistry， 为 运行 React Native 应 用 提供 JS 代 码 和 人 口 。AppRegistry 把 movies 组 
件 暴露 给 应 用 的 原生 系统 ， 使 得 原生 系统 能 够 为 应 用 加 载 代码 ， 让 应 用 真正 运行 起 来 。 

我 们 已 经 剖析 了 示例 应 用 的 代码 ， 下 面 就 开始 编写 自己 的 应 用 吧 。 
































1.9 第 一 步 : 编写 用 户 珊 面 


我 们 的 应 用 一 开始 只 有 一 条 路 由 ， 指 向 搜索 页 面 ， 可 称 之 为 主 路 由 。 接 下 来 用 核心 的 
Navigator 组 件 来 搭建 路 由 系统 。 
React Native 中 的 导航 基于 栈 ， 也 就 是 说 完整 的 路 由 历史 存储 为 数组 形式 。 当 我 们 想 要 导航 
新 的 路 由 时 ， 该 路 由 就 会 被 推 入 数组 ， 并 且 在 返回 时 再 把 它 从 数组 中 弹出 。 使 用 了 Navigator 
组 件 后 ，index.ios.js 文 件 的 内 容 如 下 所 示 。 
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import React, { Component } from 'react'; 
import { 

AppRegistry, 

Navigator 
} from 'react-native'; 


import Main from './components/main' 
class movies extends Component { 


renderScene(route, navigator) { 
if (route.id === 'MAIN') 
return <Main navigator={navigator} />; 


} 


render() { 
return ( 
<Navigator style={{ flex: 1 }} 
initialRoute={{ id: 'MAIN', title: 'Search Movies' }} 
renderScene={this.renderScene} 
/> 
); 


AppRegistry.registerComponent('movies', () => movies); 

















render 方 法 中 的 Navigator 组 件 拥 有 initialRoute 属 性 ， 这 就 是 应 用 的 主 路 由 。 同 时 代码 中 还 
有 一 个 renderscene 方 法 ， 它 会 根据 指定 的 路 由 演 染 对 应 的 界面 。 在 renderscene 方 法 中 我 们 判断 
路 由 id 是 否 为 AIN， 如 果 该 条 件 满足 就 返回 Main 组 件 。 


Main 组 件 放 在 名 为 components 的 独立 目录 下 ， 代 码 文件 的 内 容 如 下 所 示 。 


import React, { Component } from 'react'; 
import { 

StyleSheet, 

Text， 

View 
} from 'react-native'; 











export default class main extends Component { 
render() { 
return ( 
<View style={styles.container}> 
<Text style={styles.welcome}> 
Welcome to React Native! 
</Text> 
</View> 
); 
} 
} 


const styles = StyleSheet.create({ 
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container: { 
flex: 1， 
justifyContent: "Center ' ， 
alignItems: "center ' ， 
backgroundColor: '#F5FCFF', 

]， 

welcome: { 
fontSize: 20， 
textAlign: 'center', 
margin: 10， 

} 

]); 


到 目前 为 止 ，Main 组 件 仅仅 在 屏幕 中 间 显 示 了 一 条 文字 信息 :“Welcome to React Native!” 
在 模拟 器 中 刷新 应 用 ， 就 能 看 到 如 下 所 示 的 界面 。 
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Welcome to React Native! 


我 们 要 在 Main 组 件 中 添加 两 个 组 件 ，TextInput 组 件 用 于 输入 搜索 关键 词 ，Listview 组 件 用 
于 泻 染 搜索 结果 列表 。 实 践 中 最 好 是 始终 将 Listview 或 者 Ltstview 的 子 项 拆 分 成 独立 的 组 件 ， 但 
是 为 了 简单 起 见 ， 我 们 暂时 把 所 有 代码 都 写 在 一 个 文件 中 。 
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export default class main extends Component { 


constructor(props) { 
super (props); 
var ds = new ListView.DataSource({ rowHasChanged: (ri, r2) => rl !== r2 }); 
this.state = { 
dataSource: ds.cloneWithRows(['first item', 'second item']), 


} 
} 
renderRow(row) { 
return ( 
<View style={styles.listItem}> 
<Text>{row}</Text> 
</View> 
) 
} 
render() { 
return ( 
<View style={styles.container}> 
<TextInput 
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }} 
onChangeText={(text) => this.setState({ text })} 
placeholder="Enter search keyword" 
/> 
<ListView 
dataSource={this. state.dataSource} 
renderRow={this.renderRow} 
/> 
</View> 
); 
} 


} 


const styles = StyLeSheet.create({ 
container: { 
flex: 1， 
justifyContent: 'center', 
backgroundColor: “#F5FCFF ' ， 
marginTop: 25 


下 
listItem: { 
margin: 10 
} 
]); 


在 构造 函数 中 实例 化 ListView.DataSource， 传人 包含 两 个 元 素 的 数组 作为 参数 。 在 render 方 
法 中 声明 ListView 组 件 ， 将 状态 dataSource 赋 值 给 它 ， 并 定义 renderRow 方 法 ， 用 来 泻 染 视图 的 每 
一 行 。 
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同时 还 声明 了 TextInput 组 件 ， 为 它 指定 一 些 基 础 样式 以 及 占 位 文字 。 当 输入 框 的 内 容 发 生 二 
变化 时 ，onChangeText 方 法 就 会 被 调用 。 
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1.10 第 二 步 : 与 服务 器 /后 端 通信 


基本 的 UI 已 经 编写 好 ， 现 在 要 调用 API 来 获取 真实 数据 ， 在 Listview 组 件 中 进行 泻 染 。 之 前 
提 到 过 ， 网 络 请 求 的 代码 可 以 放 在 独立 的 JavaScript 文 件 中 ， 不 过 现在 只 需 调 用 一 个 API， 所 以 暂 
时 也 把 这 些 代 码 放 在 主 文件 中 。 


import React, { Component } from 'react'; 
import { 

StyleSheet, 

Text， 

View， 

ListView, 

TextInput， 

Image 
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} from 'react-native'; 
import { debounce } from 'lodash'; 


export default class main extends Component { 


constructor(props) { 
super (props); 
const ds = new ListView.DataSource({rowHasChanged: (ri, r2) => rl !== r2}); 
this.state = { 
dataSource: ds.cloneWithRows([]) 
} 


this.searchMovies = this.searchMovies.bind(this); 


} 


searchMovies = debounce(text => { 
fetch('http://www.omdbapi.com/?s=' + text) 
.then((response) => response.json()) 
.then((responseData) => { 
if ('Search' in responseData) { 
console.log(responseData. Search); 
const ds = new ListView.DataSource({rowHasChanged: (r1，r2) => r1 !== r2}); 
this.setState({ 
dataSource: ds.cloneWithRows(responseData.Search) 
}) 
} 
}) 
.Catch((err) => { 
console. log(err); 


renderRow(row) { 
return ( 
<View style={styles.listItem}> 
<Image source={{uri: row.Poster}} style={styles.poster} /> 
<View style={{flex: 1}}> 
<Text style={styles.title}>{row.Title}</Text> 
<Text style={styles.subHeading}>{row.Type} - {row.Year}</Text> 
</View> 
</View> 
) 
} 


render() { 
return ( 
<View style={styles.container}> 
<TextInput 
style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
onChangeText={this.searchMovies} 
placeholder="Enter search keyword" 


/> 
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<ListView 
dataSource={this. state.dataSource} 
renderRow={this.renderRow} 

/> 

</View> 
); 
} 
} 





const styles = StyleSheet.create({ 

container: { 
flex: 1， 
justifyContent: "Center ' ， 
backgroundColor: “#F5FCFF ' ， 
marginTop: 25 

]， 

listItem: { 
flexDirection: 'row', 
alignItems: 'center', 
margin: 5 

]， 

poster: { 
height: 75， 
width: 50 

}, 

title: { 
margin: 5， 
fontSize: 15 

和 

subHeading: { 
margin: 5， 
fontSize: 12 

} 

}); 


应 用 的 逻辑 很 简单 ， 当 用 户 在 TextInput 组 件 中 输入 文本 时 ， 就 调用 API 获 取 和 输入 文本 匹 
配 的 影片 。 因 此 ， 我 们 修改 TextInput 组 件 的 代码 ， 把 searchMovies 方 法 绑 定 到 onChangeText 属 
性 上 。 

在 searchMovies 隙 数 中 ， 用 debounce 方 法 对 函数 体 进行 了 一 层 封装 ， 这 样 就 可 以 等 用 户 输入 
完毕 后 再 调用 API。 需 要 注意 的 是 , 要 事先 用 npm 安 装 第 三 方 库 Lodash, 再 从 lodash 中 导入 debounce 
方法 。debounce 方 法 中 ，fecth 方 法 用 输入 文本 作为 关键 词 参数 ， 向 http:/www.omdapi.com 发 起 请 
求 。 响 应 结果 先 被 解析 成 JSON， 最 终 得 到 JSON 对 象 responseData。 现 在 要 做 的 就 是 把 ListView 
组 件 已 有 的 datasource 属 性 用 新 返回 的 结果 数组 进行 替换 。 完 成 这 一 步 后 ， 组 件 会 被 重新 演 染 ， 
我 们 就 能 看 到 符合 搜索 关键 词 的 影片 列表 。 


























dl 
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move - 2015 
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1.11 第 三 步 : 添加 动画 效果 


下 面 来 看 如 何 给 Listview 组 件 添 加 简单 的 滑 人 动画 。 首 先 将 列表 每 行 的 内 容 抽 离 成 独立 的 组 
件 ， 命 名 为 LitstItem， 并 且 用 它 替 换 主 组 件 中 的 renderRow 函 数 。 现 在 renderRow 函 数 的 代码 如 下 





所 示 。 


renderRow(row, sId, rId) { 
return (<ListItem row={row} delay={rId * 50} />) 
} 








我 们 为 ListItem 组 件 添加 了 两 个 属性 ，row 属 性 包含 泻 染 该 行 的 实际 数据 ， 男 一 个 delay 属 性 








用 来 控制 每 行 的 动画 逐 行 延迟 发 生 。 现 在 来 看 一 下 ListIten 组 件 的 代码 。 


import React, { Component } from 'react'; 
import { 

StyleSheet, 

Text, 

View, 

Image， 
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Animated 
} from 'react-native’'; 





export default class listitem extends Component { 


constructor(props) { 
super(props); 
this.state = { 
slideAnim: new Animated.Value(100) 
} 
} 


componentDidMount() { 
Animated. timing(this.state.slideAnim, { 
toValue: 0， 
duration: 500, 
delay: this.props.delay 
}).start(); 


render() { 
return ( 
<Animated.View style={{marginLeft: this.state.slideAnim, flexDirection: 'row', alignItems: 
'center'}}> 
<Image source={{ uri: this.props.row.Poster }} style={styles.poster} /> 
<View style={{ flex: 1 }}> 
<Text style={styles.title}>{this.props.row.Title}</Text> 
<Text style={styles.subHeading}> 
{this.props.row.Type} - {this.props.row.Year} 
</Text> 
</View> 
</Animated .View> 
) 
} 
} 


const styles = StyleSheet.create({ 
poster: { 
height: 75， 
width: 50 
]， 
title: { 
margin: 5， 
fontSize: 15 
}, 
subHeading: { 
margin: 5， 
fontSize: 12 
} 
DD; 


构造 函数 中 用 Animated.value(100) 初 始 化 了 一 个 新 状态 slideAnim。 组 件 挂 载 后 ， 
Animated.Timing 方 法 先 延迟 组 件 属性 中 指定 的 时 间 ， 接 着 在 500 毫 秒 内 将 slideAnim 的 值 从 100 逐 











nl 
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渐 减 至 0。 最 后 ， 在 render 方 法 中 声明 Animated.View 组 件 ， 并 把 sLideAnim 的 值 赋 给 marginLeft 样 
式 。 因 此 当 组 件 开 始 演 染 时 ， 每 个 ListItem 组 件 的 marginLeft 值 会 从 100 变 为 0， 列 表 的 每 一 行 逐 
渐 从 右 往 左 移 人 的 过 程 就 构成 了 连续 的 滑 和 动画。 








1.12 Android 平台 上 的 做 法 


至 此 ， 我 们 已 经 成 功 完 成 了 第 一 个 iOS 平 台 的 React Native 应 用 。 接 下 来 做 点 有 趣 的 ， 启 动 
Android 模 拟 器 ， 把 index.ios,js 文 件 的 代码 复制 粘贴 到 index.androidjs 中 ， 然 后 在 应 用 目录 下 运行 
react-native run-android 命 令 。React Native 会 在 模拟 器 中 安装 并 启动 应 用 。 一 切 就 绪 后 ， 就 会 
见 到 如 下 图 所 示 的 内 容 。 


HH 


~、 











man vY Supetrnaty Dawn of Justice 





我 们 的 应 用 在 Android 平 台 上 也 能 运行 , 代码 完全 一 样 , 一行 都 没有 修改 ! 网 络 请 求 、ListView 
组 件 、TextInput 组 件 还 有 动画 ， 所 有 功能 都 运行 得 很 好 。 多 亏 了 React Native ， 我 们 一 下 子 就 同 
时 开发 出 OS 和 Android 两 个 平台 的 应 用 ， 并 且 都 是 真正 用 原生 来 演 染 的 。 
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1.13 ”第 四 步 : 添加 原生 模块 


React Native 的 设计 方式 使 得 它 可 以 通过 原生 模块 调用 宿主 平台 的 API。 想 象 一 下 ， 你 想 实 现 
Android 平 台新 提供 的 Material Design 风 格 组 件 sSnackbar ， 可 你 知道 React Native 还 没有 提供 对 应 的 
原生 模块 。 我 们 可 以 自行 开发 这 个 模块 , 并 在 JavaScript 层 中 调用 它 。 接 下 来 的 几 章 中 会 详细 讨论 
原生 模块 的 开发 。 

添加 原生 模块 时 会 遇 到 问题 : 这 些 模块 只 针对 特定 的 平台 ,不 能 跨 平 台 使 用 。 你 刚刚 看 到 我 
们 的 应 用 在 iDOS 和 Android 平 台 上 都 运行 得 很 好 ， 但 如 果 要 在 应 用 中 使 用 Android 原 生 的 Snackbar 
组 件 呢 ? 在 应 用 中 添加 原生 组 件 后 ， 它 就 不 能 同时 在 iOS 和 Android 平 台 上 运行 。 这 种 情况 下 可 以 
先 检测 应 用 当前 所 运行 的 平台 : 如 果 是 Android 平 台 ， 就 调用 Snackbar 组 件 ; 如 果 是 iOS 平 台 ， 就 
弹出 一 个 简单 的 提示 框 。 


var { Platform } = React; 

















showMessage() { 


if (Platform.0S === 'ios') { 
// 显示 一 个 简单 的 提示 框 
} elsef{ 


// 显示 自 定义 的 android Snackbar 模 块 


应 用 在 iOS 系 统 的 设备 或 模拟 器 中 运行 时 ，pPLatform.0S 属 性 为 字符 串 ios。 同 理 ， 在 Android 
系统 中 ， 该 属性 为 字符 串 android。 


同样 的 思路 也 可 以 用 在 样式 方面 ，PLatform.setLect 方 法 接受 一 个 对 象 参数 ， 以 PLatform.05S 
属性 值 作为 键 名 ， 它 就 会 返回 与 当前 运行 平台 对 应 的 值 。 


var { Platform } = React 



































var styles = StyLeSheet.create({ 
container: { 
flex: 1， 
.. .Platform.select({ 
ios: { 
backgroundColor: 'red', 
}, 
android: { 
backgroundColor: 'blue', 
]， 
])， 
3} 
}); 


上 面 代码 的 效果 就 是 让 一 个 容器 元 素 在 两 个 平台 上 都 拥有 flex: 1 样式 ， 而 iOS 的 背景 色 为 红 











图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 








28 第 1 章 用 JavaScript 开发 移动 应 用 





色 ，Android 的 背景 色 为 蓝 色 。 
由 于 PLatform.seltect 方 法 接受 任意 的 参数 值 , 可 以 用 它 返回 对 应 平台 的 组 件 ,代码 如 下 所 示 。 


var Component = Platform.select({ 
ios: () => requtire('ComponentI0OS ' ) ， 
android: () => require('ComponentAndroid ' ) ， 


DO; 

<Component />; 

这 样 , 我 们 可 以 编写 在 iOS 和 Android 平 台 上 都 能 运行 的 组 件 ， 也 就 达成 了 两 个 平台 共享 代码 
的 目的 。 




















小 结 




















我 们 已 经 用 React Native 开 发 了 一 pe 应 用 ， 用 的 都 是 React Native 跨 平台 的 核心 组 件 ， 
此 应 用 可 以 兼容 IOS 和 Android 两 个 平台 。 我 们 不 需要 任何 Objective-C/Swift 或 者 Java 语 言 的 知 
识 ， 只 需要 JavaScript 和 React Native 就 足够 于 


1.14 部署 第 一 个 应 用 


应 用 开发 完成 后 ， 就 可 以 把 它 发 布 到 Apple 应 用 商店 或 者 Android 应 用 商店 ， 让 全 世界 的 用 户 
都 可 以 使 用 它 。 




















1.14.1 部 署 


React Native 应 用 的 部 署 方式 与 原生 应 用 的 部 署 方式 几乎 完全 一 样 。iOS 平 台 要 生成 JavaScript 
文件 包 ， 并 且 要 用 React Native 的 打包 器 对 静态 资源 进行 打包 ， 以 便 应 用 能 够 加 载 离 线 文件 包 。 
文件 打包 完毕 后 ， 我 们 在 AppDelegate.m 文 件 中 添加 几 行 代码 注释 ， 如 下 所 示 。 


// jsCodeLocation = 
// [NSURL URLWithSstring:@"http://Llocalhost:8081/index.ios.bundle"]; 


你 可 以 在 模拟 器 中 再 运行 一 次 应 用 ， 确 保 它 能 够 正常 使 用 。 

现在 ， 可 以 使 用 XCode 来 构建 以 及 发 布 应 用 了 。 请 先 确保 你 有 Apple 的 开发 者 账号 ， 这 是 在 
Apple 应 用 商店 上 发 布 应 用 的 必 备 条 件 。 你 也 可 以 使 用 TestFlight 服 务 分 发 iDOS 应 用 来 测试 beta 版 本 。 

发 布 Android 应 用 时 ， 需 要 对 生成 的 APK 安 装 包 进行 签名 ， 然 后 才能 提交 给 应 用 商店 。 与 iOS 
平台 一 样 ， 在 Google 应 用 商店 上 发 布 应 用 需要 拥有 Google 开 发 者 账号 。 


对 APK 文 件 进 行 签 名 ， 首 先 需要 使 用 keytool 生 成 签名 密 钥 ， 有 了 它 就 可 以 对 应 用 签名 。 准 
备 好 密 钥 文件 后 ， 把 它 复 制 到 android/app 目 录 下 。 然 后 配置 build.gradle 使 用 这 些 签名 密 钥 来 生成 
APK 文 件 ， 具 体 做 法 如 下 所 示 。 
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signingConfigs { 
release { 
storeFile file(RELEASE_STORE_FILE) 
storePassword RELEASE_STORE_PASSWORD 
keyAlias RELEASE KEY_ALIAS 
keyPassword RELEASE_KEY_PASSWORD 


} 
} 
buildTypes { 
release { 
signingConfig signingConfigs.release 
} 
} 

















签名 过 的 APK 文 件 生成 后 ， 就 可 以 把 它 提交 给 Play Store 等 待 审核 。 


上 述 做 法 中 ,每 当 你 想 要 发 布 应 用 的 更 新 版 本 时 ， 都 要 不 断 重复 同样 的 过 程 ， 而且 要 等 待 应 
用 市 场 对 更 新 包 进 行 审核 。 有 了 React Native， 就 可 以 通过 CodePush 服 务 ( 微软 的 开源 项 目 ) 为 
应 用 推送 动态 更 新 。 





























1.14.2 CodePush 


CodePush 插 件 让 应 用 的 JavaScript 代 码 以 及 图 片 资源 与 发 布 到 CodePush 服 务 器 上 的 
更 新 保持 同步 , 用 户 可 以 马上 看 到 你 对 产品 所 做 的 改进 。 你 的 应 用 既 能 受益 于 离线 应 用 
的 体验 ， 又 能 像 Web 平 台 一 样 灵 活 ， 让 更 新 包 完 成 后 马上 就 能 下 载 。 这 是 双赢 的 做 法 ! 


CodePush 通 过 与 服务 端 同步 的 形式 ， 更 新 应 用 内 打包 的 JavaScript 代 码 以 及 静态 资源 文件 。 
当 我 们 对 JavaScript 代 人 码 或 者 静态 资源 做 了 任意 修改 后 ， 都 要 重新 生成 JavaScript 文 件 并 推送 到 
CodePush 服 务 器 。 只 要 用 户 打开 应 用 ，CodePush 就 会 检查 我 们 推送 的 任意 更 新 版 本 。 如 果 发 现 了 
新 版 本 ，CodePush 会 下 载 JavaScript 文 件 对 已 有 的 打包 文件 和 静态 资源 文件 进行 更 新 。 这 样 用 户 
几乎 可 以 马上 获取 到 应 用 的 更 新 ， 而 且 一 切 都 在 后 台 进 行 ， 无 需 用 户 自己 手动 操作 。 


需要 留意 的 关键 之 处 在 于 ,任何 涉及 原生 代码 (如 修改 了 AppDelegate.m 或 MainActivityjava 
文件 ) 的 产品 改动 无 法 通过 CodePush 来 分 发 ,因此 这 种 情况 要 通过 相应 平台 的 应 用 商店 进行 更 新 。 









































1.15 总结 





本 章 介绍 了 什么 是 React Native， 它 和 现 有 技术 的 差异 以 及 它 的 重要 性 。 还 学 习 了 关键 的 概 
念 、 架 构 以 及 React 和 React Native 的 工作 原理 。 并 成 功 地 用 React Native 开 发 了 第 一 个 真正 的 路 平 
台 原 生 iOS 和 Android 应 用 。 


接 下 来 的 章节 将 为 你 详细 介绍 一 些 React Native 的 概念 。 
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原生 用 户 界面 是 React Native 的 重要 特性 。 运 行 react-native init 命 令 ， 就 会 启动 一 个 包含 
简单 界面 的 Hello World 应 用 ， 它 完全 由 原生 视图 以 及 文本 组 件 来 泻 染 。JavaScript 编 写 的 React 组 
件 仅 仅 作为 原生 视图 的 抽象 表现 以 及 配置 。 所 有 React 组 件 最 后 都 会 被 演 染 成 原生 UI 组 件 。 我 们 
可 以 在 其 他 组 件 的 基础 上 开发 React 组 件 ， 同 时 这 些 组 件 本 身 也 是 用 另外 的 组 件 开发 的 。 然 而 从 
组 件 关 系 链 的 末端 来 看 ， 我 们 只 是 编写 规则 让 原生 层 接 收 并 显示 出 来 。 


尽管 React Native 通 过 我 们 所 熟悉 的 JavaScript 和 React 让 用 户 界 面 开 发 变 得 很 简单 ， 移 动 应 用 
还 是 需要 经 常 调用 原生 API 来 获取 数据 ， 比 如 设备 旋转 方向 、 当 前 地 理 位 置 、 网 络 状态 、 电 量 水 
平等 。React Native 提 供 的 库 可 以 解决 上 述 需求 ， 它 包含 了 许多 暴露 为 NativeModutes 的 API， 但 其 
中 可 能 缺少 你 所 需要 的 API， 或 者 你 想 在 原生 端 定 制 的 业务 逻辑 并 不 适合 让 ReactNative 的 核心 库 
来 提供 。 开 发 者 可 以 用 React Native 创 建 自 己 的 原生 API， 让 应 用 的 JavaScript 层 可 以 调用 。 这 些 原 
生 模块 可 以 直接 用 在 Android 或 0S 的 SDK 中 ， 它 们 的 概念 类 似 于 NodeJS 的 原生 c+t+ 模 块 ， 通 过 
node-gyp 绑 定 进 行 编译 , 我 们 通过 React Native 库 提供 的 抽象 能 够 与 Java 或 Objective-C/Swift 进 行 交 
互 ， 而 不 是 与 V8 这 样 的 底层 JavaScript3 引 | 警 打 交道 。 库 所 暴露 的 可 扩展 原生 模块 类 与 桥接 层 交 互 ， 
桥接 层 负责 应 用 两 个 层级 间 的 序列 化 、 反 序列 化 以 及 批 处 理 通信 。 通 过 Android 的 函数 注释 以 及 
i90S 的 安定 义 ， 你 编写 的 方法 可 以 让 JavaScript 调 用 ， 或 者 传播 事件 让 JavaScript 监 听 。 原 生 模 块 函 
数 从 JavaScript 端 接收 参数 ， 经 过 桥接 层 后 ， 参 数 被 处 理 成 恰当 的 类 型 并 且 可 以 直接 使 用 。 


本 章 将 介绍 原生 组 件 和 原生 模块 的 架构 方式 ， 以 及 如 何 开发 它们 。 


















































































































































2.1 第 一 个 原生 组 件 


你 首先 要 接触 的 原生 组 件 很 可 能 是 view 和 Text 组 件 ， 它 们 直接 映射 到 对 应 的 原生 组 件 上 ， 即 
iOS 系 统 的 UIView 和 UILabel 以 及 Android 系 统 的 android.view.View 和 android.widget.TextView。 当 
定义 一 个 组 件 来 演 染 一 个 包含 几 行 文本 的 View 时 , 原生 层 会 建立 与 该 界面 结构 一 样 的 镜像 。 桥 接 
层 把 规则 (组件 属 性 ) 从 UI 层 传递 给 原生 层 。 最 终 在 屏幕 上 看 到 的 ， 就 是 React 组 件 转 译 成 相应 
原生 组 件 的 结果 。 我 们 将 深入 探究 “视图 管理 器 ”如 何 管理 原生 UI 组 件 ， 以 及 React 组 件 属性 如 
何 传递 给 在 原生 层 定 义 的 函数 并 选择 处 理 方式 。 
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接 下 来 要 介绍 的 主要 概念 是 ， 每 一 个 JSX 元 素 都 与 其 所 代表 的 原生 组 件 的 实例 绑 定 到 一 起 。 
两 者 总 是 与 对 方 保持 同步 ，React 组 件 定 义 页 面 结 构 ， 原 生 UI 组 件 就 演 染 出 对 应 的 UI 结构 。 

class HelloWorld extends React.Component { 

render() { 
return ( 
<View> 
<Text>Hello World!</Text> 
</View> 
) 
} 

} 

Javascript 层 的 代码 很 直观 ,上述 代码 声明 了 包含 几 行文 本 的 视图 然而 为 了 实现 两 导 之 的 固 汪 汪 
同步 ， 实 际 上 有 很 多 工作 要 做 。HetLtLoworLd 组 件 挂 载 之 后 ， 通 知 原生 层 展现 一 个 View 节 点 并 包含 
一 个 Text 节 点 。UIView ( 或 androtd.view.View ) 以 及 UILabel (或 android.widget.TextView ) 的 实 
例 被 创建 。 每 个 实例 分 配 了 一 个 标识 符 ,， 并 与 JavaScript 层 共享 。 从 此 刻 起 ， 只 要 这 些 视图 的 属性 
发 生 了 改变 , 或 者 将 它们 从 屏幕 上 移 除 ， 这 些 改变 集合 会 根据 它们 的 身份 (组件 ID ) 和 改变 内 容 
(任意 属性 ) 通知 给 原生 层 ， 原 生 层 就 会 按照 JavaScript 层 传 来 的 信息 调整 布局 。 


最 后 ，React Native 中 的 JSX 语 法 类 似 于 我 们 所 熟悉 的 React 虚 拟 DOM ， 它 就 是 用 来 编写 设置 
原生 视图 的 配置 文件 。 




































































2.2 剖析 原生 组 件 


一 个 原生 组 件 主 要 由 两 部 分 组 成 : ViewManager ， 以 及 实际 的 UI 组 件 。UI 组 件 的 类 ， 可 以 继 
承 自 某 个 Android 的 视图 ， 或 者 利用 iOS 的 RCTView 作 为 特殊 容器 来 封装 任意 的 视图 控制 器 。 

ViewManager 扮 演 的 角色 负责 连接 React 组 件 以 及 该 组 件 代 表 的 原生 UI 组 件 实例 。vViewManager 
是 单 例 模 式 ， 对 于 指定 的 组 件 类 型 具有 唯一 一 个 视图 管理 器 ， 它 管理 着 指定 类 型 的 所 有 组 件 。 

React 组 件 挂 载 之 后 就 会 触发 它 的 render 方 法 ,并 返回 它 所 维护 的 JSX 组 件 树 。 这 些 树 节点 根 
据 它们 的 类 型 被 发 送 给 对 应 的 ViewManager( 比如 <View /> 节点 会 被 发 送 给 处 理 View 实 例 的 管理 
器 )。 元 素 的 视图 管理 器 创建 出 React 组 件 代 表 的 原生 组 件 实例 。 如 果 该 组 件 拥 有 属性 ， 这 些 属性 
将 由 ViewManager 的 函数 接收 ， 用 来 创建 符合 这 些 属性 的 原生 组 件 实例 。 接 着 就 可 以 更 新 React 组 
件 对 应 的 原生 组 件 。 当 属性 发 生变 化 后 会 进行 同样 的 过 程 。 这 里 就 由 开发 者 来 决定 接 下 来 要 做 什 
么 了 。 假设 我 们 要 创建 一 个 自 定义 地 图 UI 组 件 ， 从 JavaScript 层 接收 了 一 些 经 纬度 坐标 数据 后 ， 
把 地 图 定位 到 新 的 中 心 点 。 我 们 很 快 就 会 动手 开发 这 个 示例 ， 首 先 来 看 看 对 Android 原 生 组 件 的 
分 析 。 

假设 我 们 有 一 些 自 定义 原生 UI 类 称 作 customView。 由 于 React Native 中 已 经 有 完全 可 用 的 
View 组 件 ， 并 且 可 配置 ， 生 产 实践 中 我 们 永远 不 需要 写 下 面 的 代码 ， 现 在 出 于 讨论 的 需要 暂时 
这 样 写 。 
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class CustomView extends View { 


Ee 


出 于 某 种 需要 ， 我 们 要 让 customview 显 示 在 屏幕 上 。 一 些 React 组 件 将 会 控制 它 的 显示 方式 ， 
比如 显示 成 <CustomView /> 元 素 。 


每 个 原生 组 件 都 需要 一 个 视图 管理 需 。CustomviewManager 继 承 SimpLeViewManager 并 指定 属于 
它 的 原生 UI 组 件 CustomView。 
光 光 
* 控制 CustomView 的 CustomViewManager 类 
*/ 
class CustomViewManager extends SimpleViewManager<CustomView> { 


@Override 
public String getName(); 














@Override 
protected CustomView createViewInstance (ThemedReactContext context); 


@ReactPprop(name = "SomeProp") 
public void setSomeProp(CustomView customViewInstance, @Nullable String value); 


} 
我 们 实现 了 两 个 继承 自 父 类 的 方法 getName 和 createViewInstance ， 以 及 自 定义 方法 


Set9S9omepProp。 


口 getName 方 法 返回 组 件 名 称 ， 在 JavaScript 层 被 引用 。 

口 createViewInstance 方 法 用 于 在 JavaScript 层 挂 载 React 组 件 时 创建 CustomView 的 实例 。 

口 setSomepProp 方 法 在 React 组 件 属 性 包含 初始 值 或 新 值 时 被 调用 。 参 数 为 相应 的 实例 和 
性 值 。 


总 体 上 看 控制 流 从 JavaScript 层 进入 原生 层 。React 组 件 负 责 泻 染 JSX 组 件 ，JSX 组 件 的 属性 以 
及 层次 结构 通过 桥接 层 传递 给 原生 层 。 相 应 的 ViewManager 取 得 这 些 数据 后 ， 如 果 不 存在 已 有 实 
例 ， 就 调用 createviewInstance 方 法 创建 一 个 。 每 个 原生 元 素 都 有 一 个 标识 符 , 创建 React 组 件 的 
时 候 需 要 提供 对 应 的 标识 符 。 这 便 是 React Native 能 够 映射 两 个 层次 结构 的 奥秘 所 在 。 如 果 JSX 组 
件 定义 了 某 些 属性 ， 它 将 寻找 对 应 的 函数 ( 带 有 @ReactProp 和 @ReactPropGroup 注 释 )， 并 以 相应 
的 视图 实例 和 属性 值 作为 参数 调用 该 方法 。 根据 JavaScript 组 件 定义 的 配置 和 布局 , 屏幕 上 就 会 泻 
染 出 最 终 的 原生 组 件 。 
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JavaScript 层 


<View></View> 


桥接 层 





View 实 例 





下 面 来 逐步 分 析 。 假 设 应 用 只 包含 一 个 组 件 ， 并 满足 以 下 条 件 。 


(1) 组 件 是 一 个 简单 的 view 组 件 。 
(2) 初始 背景 色 为 红色 。 
(3) 儿 秒 后 背景 色 变 为 黄色 。 


class BackgroundExample extends React.Component { 
constructor(props) { 
super(props); 
this.state = { 
backgroundColor: "red ' 
}; 
} 
componentWillMount() { 
setTimeout(() => this.setState({backgroundColor: 'yellow'}), 3000); 








} 
render() { 
var {backgroundColor} = this. state; 
return ( 
<View style={[styles.root, {backgroundColor}]}></View> 
); 
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} 
} 


const style = StyLeSheet.create({ 

root: { 
flex: 1 
} 

}); 

应 用 启动 并 挂 载 组 件 后 ， 演 染 JSX 组 件 传递 给 原生 层 。 在 原生 层 找到 <view /> 组 件 的 视图 管 
理 器 ， 并 通过 它 调用 createViewInstance 方 法 ,初始 化 android.view.View (iOS 系 统 为 UIView ) 并 
返回 。React Native 内 部 为 该 组 件 创建 一 个 ShadowNode, 这 个 ShadowNode 与 JavaScript 层 的 React 组 件 
配对 ， 两 者 从 此 保持 同步 。 


<View /> 元 素 也 有 一 个 style 属 性 , 包含 了 flex 和 backgroundColor 样 式 规则 。 这 些 值 会 带 上 视 
图 的 ID ， 通 过 桥接 层 传递 来 通知 React Native 找 到 需要 修改 的 原生 视图 实例 。 接 着 该 视图 实例 和 
样式 属性 值 一 起 传 给 负责 处 理 样 式 规 则 的 方法 。 在 这 个 方法 内 ， 原 生 视图 会 被 处 理 成 弹性 布局 ， 
同时 更 新 它 的 背景 色 。 

3 秒 后 状态 发 生 了 改变 , backgroundColor 的 值 变 成 了 'yellow'。 状态 的 改变 导致 组 件 的 render 
方法 接着 被 调用 , 返回 的 View 元 素 更 新 了 style 属 性 ， 变 成 了 {backgroundColor: 'yellow'}。 新 值 
发 送 给 ViewManager ， 我 们 知道 ， 此 时 它 将 根据 新 值 对 原生 视图 的 背景 色 进行 更 新 。 用 户 看 见 的 
效果 就 是 背景 色 从 红色 变 成 了 黄色 。 

以 上 便 是 React Native 组 件 的 主要 概念 。 每 个 JavaScriptReact 节 点 都 有 配对 的 原生 节点 。 对 每 
个 应 用 节点 执行 对 应 的 操作 : 绑 定 唯一 标识 符 。React 节 点 所 发 生 的 一 切 都 会 根据 标识 符 和 修改 
后 的 属性 ， 转 换 成 原生 节点 。 这 两 者 始终 互相 保持 同步 。 既 然 我 们 已 经 理解 了 原生 组 件 各 部 分 的 
原理 ， 接 着 就 来 动手 创建 一 个 。 




























































































2.3 创建 自 定义 原生 组 件 


在 接 下 来 的 示例 中 将 用 MapBox 的 SDK 开 发 地 图 组 件 。 最 终 完成 的 React Native 组 件 包 含 如 下 
结构 。 


<MapBoxView 
zoom={10} 
center={{latitude, longitude}} 
onCenterChanged={this .onCenterChanged} 
/> 


我 们 开发 的 界面 上 将 包含 两 个 输入 框 、 一 个 按钮 和 一 张 地 图 。 输入 框 负责 显示 地 图 的 当前 坐 
标 , 并 且 用 户 也 可 以 对 它们 进行 编辑 。 按 钮 用 来 提交 坐标 并 重新 定位 地 图 。 地 图 会 根据 提供 的 坐 
标 进行 定位 ， 当 用 户 移 动 地 图 时 返回 新 的 坐标 并 显示 在 输入 框 中 。 
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先 来 编写 React 组 件 。 


class MapDemo extends React.Component { 





constructor(props) { 
// 记得 传 入 props 
// 我 们 终 完 希 望 原生 层 知 道 最 初 的 状态 


super (props); 


// 起 始 和 坐标 经 纬度 均 为 0 


var center = {latitude: 0, longitude: 0}; 


this.state = { 
// 地 图 中 心 
mapCenter: { 
...Center 
}， 
// 编辑 后 的 坐标 (避免 在 用 户 输入 时 更 新 地 图 ) 
editCenter: { 


.. .Center 
} 
中 
} 
/** 
* 地 图 位 置 移动 后 更 新 输入 框 
x 


onCenterChanged({latitude, longitude}) { 
var editCenter = {latitude, longitude}; 
this.setState({editCenter}); 


} 


/** 

* 提交 输入 框 内 容 后 更 新 地 图 

* 
/ 

updateMapCoordinates() { 
var latitude = parseFloat(this.state.editCenter.latitude); 
var longitude = parseFloat(this.state.editCenter.longitude); 
var mapCenter = {latitude, longitude}; 
this.setState( {mapCenter}); 


} 


/** 

* 用 户 输 入 时 更 新 单个 输入 框 的 内 容 

*/ 

updateEditField(plain, value) { 
var editCenter = { 
...this.state.editCenter, 
[plain]: value 


this.setState({editCenter}); 
} 


render() { 
return ( 


图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 





2.3 创建 自 定 义 原 生 组 件 37 





<View> 

<MapBoxView 
zoom={10} 
center={this.state.mapCenter} 
onCenterChanged={event => this.onCenterChanged(event.nativeEvent.src)} 

/> 

<TextInput 
value={this.state.editCenter.latitude} 
onChangeText={value => updateEditrField('latitude', value)} 

/> 

<TextInput 
value={this.state.editCenter.longitude} 
onChangeText={value => updateEditrField('longitude', value)} 

/> 

<TouchableHighlight onPress={() => updateMapCoordinates()}> 
<Text>Update</Text> 

</TouchableHighlight> 

</View> 
3 
} 
} 


接 下 来 分 别 看 看 Android 和 iOS 的 情况 ， 每 个 平台 都 会 为 MapBox 的 MapView 元 素 实现 一 个 视图 
管理 器 。 





2.3.1 Android 


视图 管理 需 类 一 开始 从 SimpLeviewManager 继 承 最 初 的 结构 并 实现 所 需 的 方法 。 上 文 提 到 过 ， 
已 是 单 例 模式 的 实例 ， 任 何 MapBoxview 组 件 的 通信 都 要 经 过 它 。 屏 幕 上 新 增 了 MapBoxview 组 件 ， 
就 会 创建 该 视图 管理 器 。 组 件 的 任何 属性 发 生 了 改变 ， 比 如 坐标 ， 也 会 由 它 来 处 理 。 


class ReactMapBoxViewManager extends SimpleViewManager<MapView> { 
public static final String REACT_CLASS = "ReactMapBoxView"; 
private String accessToken; 
























































ReactMapBoxViewManager(String accessToken) { 
this.accessToken = accessToken; 


} 


/** 

* React 组 件 的 名 称 

*/ 

@Override 

public String getName() { 
return REACT_CLASS; 


} 


/** 

* 创建 新 的 MapView 实 例 

* 该 过 程 在 新 的 React 组 件 MapBox 挂 载 到 应 用 的 时 候 执行 
yh 
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protected MapView createViewInstance(ThemedReactContexted themedReactContext) { 
MapView mapView = new MapView(themedReactContext, accessToken); 
// 必需 的 调用 
mapView.onCreate(nuLL) ; 
return mapView; 
} 
} 


SimpleViewManager<MapView> 人 负责 通知 父 类 所 要 管理 的 View 类 型 ，MapView.createViewInstance 
方法 初始 化 Mapview 并 返回 React 组 件 代 表 的 实例 。 这 里 需要 注意 一 点 ，MapVview 构 造 函 数 需要 一 个 
访问 令 牌 作为 参数 。 不 巧 的 是 ，createVviewInstance 方 法 处 于 我 们 控制 范围 以 外 的 流程 中 ， 而 且 
此 时 还 不 能 访问 组 件 的 属性 ， 因 此 把 访问 令 牌 设置 为 React 组 件 的 属性 并 没有 什么 用 。 这 种 情况 
下 可 以 考虑 一 个 巧妙 的 解决 方案 ， 不 过 这 个 示例 中 采用 的 方式 很 直接 。 为 了 能 在 
createViewInstance 方 法 中 使 用 令 牌 ， 在 我 们 拥有 控制 权 的 ReactMapBoxViewManager 构 造 函 数 中 ， 
把 令 牌 作 为 参数 的 一 部 分 。 后 面 将 详细 解释 在 ReactpPackage 中 对 此 进行 初始 化 的 过 程 发 生 在 何 
处 ， 以 及 在 何 处 可 以 获得 直接 操作 的 权限 ， 并 提供 一 个 令 牌 给 Mapview 使 用 。 


至 此 我 们 已 经 拥有 了 一 个 能 够 工作 的 组 件 , 但 是 还 不 能 提供 任何 特殊 的 配置 。 接 下 来 添加 一 
些 函 数 对 center 和 zoom 属性 进行 处 理 。 


class ReactMapBoxViewManager extends SimpleViewManager<MapView>{ 














下 





dl 



































public static final String REACT_PROP_CENTER = "center"; 
public static final String REACT_PROP_ZOOM = "zoom"; 


QReactProp(name = REACT_PROP_CENTER) 
public void setCenter(MapView view, @Nullable ReadableMap center) { 
if (center != null) { 
double latitude = center.getDouble("latitude"); 
double longitude = center .getDouble("longitude"); 
CameraPosition cameraPosition = new CameraPosition.Builder() 
.target(new LatLng(latitude, longitude)) 
.build(); 
View.moveCamera(CameraUpdateFactory.newCameraPosition(cameraPosition)); 
} 
} 


QReactProp(name = REACT_PROP_ZOOM) 
public void setZoom(MapView view, double zoomLeveL) { 
view.setZoom(zoomLevel); 
} 
} 
现在 我 们 的 组 件 已 经 就 绪 ， 可 以 接收 一 些 配置 参数 了 。 用 @ReactpProp 注 释 的 方法 负责 组 件 属 
性 交互 。 该 注释 的 第 一 参数 name 是 React 组 件 的 属性 名 称 。 它 所 注释 的 方法 接受 两 个 参数 : MapView 
的 实例 和 属性 值 。 只 需 定 义 好 哪个 函数 负责 处 理 哪 个 属性 , React Native 内 部 就 会 完成 其 余 的 工作 。 


回 到 React 这 一 层 ， 我 们 有 如 下 代码 。 
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<MapBoxView center={{latitude: 0，Longitude: 0}} /> 


这 个 React 组 件 会 在 某 种 方式 下 被 转译 成 原生 层 的 代码 。MapBoxView 将 映射 到 
ReactMapBoxViewManager 上 ， 它 有 一 个 以 @ReactProp(name = "center") 进 行 注释 的 方法 。 根 据 这 
种 映射 关系 ，React 内 部 就 可 以 作出 以 下 判断 。 

(1) 调用 哪个 方法 。 

(2) 该 方法 需要 的 参数 类 型 是 什么 。 

(3) React 组 件 所 配对 的 原生 MapView 实 例会 调用 setcenter ， 属 性 参数 的 类 型 为 ReadableMap， 
它 本 质 上 是 类 型 安全 的 Map 数 据 结 构 (例如 : 通过 center .getDouble 的 形式 读 取 数据 )。 接 着 从 
ReadableMap 中 取出 数据 建立 新 位 置 坐 标 。 通 过 MapBox SDK 提 供 的 cameraPosition 类 来 创建 新 的 
位 置 目 标 ， 并 更 新 MapView 实 例 。 用 户 就 看 到 地 图 移 到 了 新 的 位 置 。 

在 第 一 步 中 ， 注 册 回 调 函 数 处 理 用 户 移动 地 图 的 操作 。 


private static final String EVENT_REGION_CHANGED = "onRegionChanged"; 


























@Override 
@Nullable 
public Map getExportedCustomDirectEventTypeConstants() { 
MapBuilder .Builder builder = MapBuilder .builder(); 
builder .put(EVENT_REGION_CHANGED, MapBuilder .of("registrationName", 
EVENT_REGION_CHANGED) ) ; 
return builder.build(); 
} 


@ReactMethod(name = EVENT_REGION_CHANGED, defaultBoolean = true) 
public void onRegionChangedListener(final MapView map, Boolean value) { 
view.addOnMapChangedListener(new MapView.onMapChangedListener() { 
@Override 
public void onMapChanged(int change) { 
if (change == MapView.REGION_DID_CHANGE || 
change == MapView.REGION_DID_CHANGE_ANIMATED) { 
WritableMap event = Arguments.createMap(); 
WritableMap location = Arguments.createMap(); 


location.putDouble("latitude", view.getCenterCoordinate().getLatitude()); 
location.putDouble("longitude", view.getCenterCoordinate().getLongitude()); 
location.putDouble("zoom", view.getZzoom()); 

event.putMap("src", location); 


ReactContext reactContext = (ReactContext) view.getContext(); 


context.getJSModule(RCTEventEmitter .class) 
.receiveEvent(view.getId(), EVENT_REGION_CHANGED, event); 


}); 
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分 发 到 React 组 件 并 绑 定 的 回调 函数 需要 一 些 额外 的 配置 。 毕 竟 ，React Native 需 要 一 种 策略 
把 任意 的 事件 传播 给 绑 定 在 React 组 件 属性 上 的 函数 ， 这 可 绝 非 易 事 。 此 处 就 要 用 到 
getExportedCustomDirectEventTypeConstants 方 法 ， 它 负责 定义 事件 、 组 件 ， 以 及 绑 定 了 回调 函数 的 
组 件 属性 之 间 的 映射 关系 。 它 接受 事件 名 称 以 及 一 个 映射 值 registrationName:callbackPropertyName 
作为 参数 。 这 样 React Native 在 分 发 事件 给 组 件 时 就 知道 要 查找 的 属性 名 称 。 

下 面 这 段 话 来 自 源 代码 文档 。 


配置 数据 的 映射 关系 被 返回 给 JavaScript 层 ,由 此 定义 了 可 以 用 在 原生 视图 上 的 合法 
事件 ， 这 种 类 型 的 事件 应 当 直 接 分 发 ， 并 且 不 需要 冒 泡 。 


以 下 代码 会 创建 事件 映射 。 


"onRegionChanged": { 
"registrationName": "onRegionChanged" 


} 
上 述 配 置 的 实际 意义 如 下 所 示 。 


"nameOfEvent": { 
"registrationName": "nameOfPropertyOnComponentWithCallback" 


} 


在 这 层 映 射 关 系 下 ， 组件 属 性 onRegionChanged 有 对 应 的 ReactProp 注 释 。 需 要 注意 的 是 ， 没 
有 必要 为 事件 回调 属性 创建 原生 属性 处 理 函 数 , 我 们 可 以 把 监听 器 以 及 事件 触发 右 绑 定 到 映射 视 
图 上 ， 作 为 createViewInstance 方 法 的 一 部 分 ， 因 此 不 需要 在 原生 层 创 建 一 个 属性 来 实现 这 样 的 
目的 。 然 而 如 果 映 射 事件 没有 回调 函数 , 我 们 也 没有 必要 把 它 传播 给 组 件 。 通 过 把 监听 器 设置 成 
属性 处 理 函 数 的 一 部 分 ， 就 能 够 避免 在 没有 设置 属性 的 情况 下 绑 定 监听 器 ， 因 为 只 有 当 React 组 
件 拥 有 onRegionChange 属 性 时 ， 属 性 处 理 函 数 才 会 被 调用 。 

该 函数 内 部 为 Mapview 实 例 绑 定 了 MapView.onMapChangeListener 监 听 右 。 当 监听 到 移动 地 图 的 
事件 时 ， 就 创建 一 个 包含 新 坐标 的 对 象 。event 变 量 用 于 存放 事件 对 象 ，Location 变 量 用 于 存放 
要 与 事件 一 起 发 送 的 数据 ， 两 者 都 是 WritableMap 类 型 o 


注意 : JavaScript 层 接收 了 来 自 原生 层 的 事件 后 ， 原 生 事件 对 象 位 于 JavaScript 事 件 对 象 的 
nativeEvent 属 性 中 。 


创建 了 event 和 Location 对 象 之 后 ， 可 以 通过 RCTEventEmitter 类 把 操作 分 发 到 JavaScript 层 。 
回 到 createvViewInstance 方 法 中 ， 我 们 用 当前 的 ThemedReactContext ( ReactContext 的 子 类 ， 
ReactContext 是 Context 的 子 类 ) 实例 化 Mapview。 为 了 访问 其 他 模块 ， 比 如 RCTEventEmitter ， 需 
要 从 view 对 象 中 获取 当前 的 执行 环境 。 通 过 暴露 出 来 的 ReactContext ， 就 可 以 获取 其 他 React 
Native 模 块 。 这 样 一 来 ， 我 们 取得 了 RCTEventEmitter 并 接着 调用 receiveEvent。 这 个 过 程 会 利用 
取得 的 UI 组 件 的 唯一 标识 符 ， 把 UI 组 件 与 对 应 的 React 组 件 进行 映射 。 记 住 ， 每 个 原生 节点 都 会 
根据 自身 的 唯一 标识 符 , 与 JavaScript 层 的 React 市 点 配对 , 这 就 是 React 判 断 事件 分 发 目标 的 方式 。 
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第 二 参数 传人 事件 的 名 称 ， 最 后 一 个 参数 传人 事件 对 象 本 身 。 由 于 我 们 用 getExportedCustom- 
DirectEventTypeConstants 方 法 定义 了 事件 与 组 件 属性 之 间 的 映射 关系 ，React Native 就 能 把 该 事 
件 分 发 给 对 应 的 React 组 件 ， 组 件 属性 onRegionChanged 上 注册 的 事件 回调 就 会 被 触发 。 

现在 已 经 配置 好 了 原生 组 件 , 可 以 接收 属性 以 及 分 发 事件 了 。JavaScript 层 还 需要 几 个 步骤 为 
原生 组 件 定 义 React 接 口 。 不 过 接 下 来 先 讨 论 如 何 集成 iOS 系 统 的 支持 。 如 果 你 对 iOS 的 章节 不 感 
兴趣 ， 可 以 直接 跳 到 之 后 JavaScript 的 部 分 。 


















































2.3.2 iOS 


iOS 系 统 对 原生 模块 的 实现 有 几 点 不 同 。 首先， 地 图 视图 要 放 在 “React 视 图 宿主 ”之 中 。 这 
是 专 为 React Native 开 发 的 视图 容器 ， 它 可 以 托管 任何 自 定义 的 原生 视图 。 如 果 想 要 使 用 自 定义 
的 原生 视图 ， 只 要 把 它 添加 成 RcTView 宿 主 的 子 视图 。 除 此 以 外 就 是 视图 管理 器 的 使 用 了 ,与 
Android 系 统 上 的 做 法 一 样 。 创 建 RcTViewManager 的 子 类 ， 它 与 Android 系 统 的 SimpleViewManager 
扮演 一 样 的 角色 ，JavaScript 层 React 组 件 所 表示 的 视图 由 它 来 控制 和 操作 。 


// ReactMapBoxViewManager.h 
#import "RCTViewManager.h" 

















@interface ReactMapBoxViewManager : RCTViewManager 
@end 


// ReactMapBoxViewManager .m 
#import "ReactMapBoxViewManager.h" 


@implementation ReactMapBoxViewManager 
RCT_EXPORT_MODULE( ); 
-(UIView *)view 


// 很 快 就 会 补 上 此 处 的 代码 


@end 


头 文件 中 实现 了 RCTViewManager 类 ， 除 此 以 外 该 文件 中 没有 其 他 内 容 。 文 件 内 部 的 实现 包含 
RCT_EXPORT_MODULE 宏 定义 ， 让 React Native 的 其 他 部 分 可 以 访问 该 类 。view 方 法 将 用 于 创建 map 视 
的 实例 ( 如 同 Android 系 统 的 createViewInstance )， 我 们 先 搭建 完 自 定义 的 RCTView 容 嚣 ， 再 回 
过 头 来 介绍 它 。 

接 下 来 的 步骤 要 创建 一 个 继承 自 RcTView 的 自 定义 视图 组 件 。 它 将 用 来 托管 MapBox 地 图 并 与 
视图 管理 需 交 互 。 


// ReactMapBoxView.h 
#import <Mapbox/Mapbox.h> 
#import "RCTView.h" 
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@interface ReactMapBoxView : RCTView 


-(void)setCenter:(CLLocationCoordinate2D)center; 
-(void)setZzoom: (double)zoomLevel; 


@end 


在 头 文件 中 ，ReactMapBoxView 继 承 RCTView 类 并 声明 了 两 个 方法 : setCenter 和 zoomCenter。 
它们 将 负责 处 理 center 和 zoom 属性 值 。 


// ReactMapBoxView.m 
#import "ReactMapBoxView.h" 








@implementation ReactMapBoxView { 
// 地 图 实例 
MGLMapView * _map; 

} 


// MapView 有 个 问题 ， 它 不 能 创建 没有 边界 的 地 图 
// 要 等 待 视 图 初始 化 完毕 之 后 再 加 载 地 图 
-(void)createMap 


{ 


// 初始 化 新 的 地 图 
_map = [[MGLMapView alloc] initwithFrame:self.bounds]; 


// 用 RCTView 容 器 调整 地 图 尺寸 
_map.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight 


// 把 地 图 添加 为 RCTView 的 子 视图 
[self addSubview:_map]; 
} 


-(void)setCenter:(CLLocationCoordinate2D)center 
{ 
if (! _ map) { 
[self createMap]; 


} 
// 设置 地 图 中 心 位 置 
_map.centerCoordinate = center; 


} 


-(void)setZzoom: (double)zoomLevel 
{ 
if (! map) { 
[seLf createMap]; 


} 
// 设置 地 图 缩放 等 级 
_map.zoomLevel = zoomLevel; 


} 
继承 RCTView 的 ReactMapBoxView 才 是 真正 的 地 图 视图 的 容器 。 我 们 在 一 个 方法 中 创建 地 图 ， 
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设置 容器 边界 为 地 图 的 框架 。 该 方法 还 确保 地 图 尺寸 可 以 随 着 宿主 视图 的 尺寸 自由 调整 。 最 后 ， 


把 地 图 添加 为 宿主 视图 的 子 视图 。 
男 外 两 个 方法 根据 React 组 件 属性 对 地 图 进行 控制 。 这 里 与 Android 系 统 有 一 些 不 同 , Android 


























的 视图 管理 器 负责 大 部 分 属性 的 处 理 逻 辑 。iOS 系 统 的 视图 管理 器 好 比 属 性 的 代理 或 寄存 器 ， 实 
际 的 视图 会 通过 宏 定 义 施展 的 小 魔法 来 接收 并 处 理 这 些 属性 。 












































为 了 最 终 把 两 个 部 分 结合 起 来 ， 下 面 回 到 ReactMapBoxViewManager 的 代码 ， 初 始 化 这 个 自 定 
义 的 视图 ， 并 建立 属性 映射 关系 。 


// ReactMapBoxViewManager .m 





#import "RCTMapBoxViewManager.h" 
+#import "ReactMapBoxView.h" 


@implementation RCTMapBoxViewManager 


RCT_EXPORT_MODULE(); 


-(UIView *)view 


{ 


+ return [[ReactMapBoxView alloc] init]; 


+RCT_EXPORT_VIEW_PROPERTY(center, CLLocationCoordinate2D); 
+RCT_EXPORT_VIEW_PROPERTY(zoom, double); 


@end 


现在 ,我 们 完善 了 view 方 法 ， 它 与 Android 系 统 的 createViewInstance 方 法 一 样 ， 负 责 初始 化 
并 返回 ReactMapBoxView。 


安定 义 RCT_EXPORT_VIEN_PROPERTY 用 于 定义 属性 映射 关系 。 它 接受 两 个 参数 : 属性 名 称 ， 期 


望 的 值 类 型 。 


宏 定 义 的 魔法 就 发 生 在 此 处 ， 它 会 根据 属性 名 称 ， 调 用 view 方 法 返回 的 





ReactMapBoxView 的 setter 方 法 。 以 属性 center 为 例 ， 宏 定义 会 调用 地 图 视图 实例 上 的 setCenter 


方法 。 类 似 地 ， 

















zoom 属性 会 根据 React 元 素 的 属性 值 调用 实例 的 setzoom 方 法 。 











最 后 ， 设 置 React 组 件 的 onRegionChanged 回 调 函 数 。 当 地 图 发 生 移动 时 ， 使 用 桥接 层 的 
eventDispatcher 与 原生 组 件 交 互 。 首 先 更 新 ReactMapBoxView， 以 包含 MGLMapViewDelegate 协 议 的 
实现 ,该 协议 用 于 处 理 地 图 事件 。 另 外 在 构造 隐 数 中 注入 ReactMapBoxViewManager 提 供 的 
eventDispatcher 引 用 。 由 于 ReactMapBoxView 拥 有 地 图 视图 的 实例 ， 它 负责 事件 的 处 理 以 及 传播 。 


下 面 在 ReactMapBoxView 的 头 文件 中 增加 一 行 声 明 ， 提 供 eventDispatcher 的 注入 方式 。 


// ReactMapBoxView.h 





#import <Mapbox/Mapbox.h> 
#import "RCTView.h" 
+#import "RCTEventDispatcher.h" 
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-Qinterface ReactMapBoxView : RCTView 
+@interface ReactMapBoxView : RCTView<MGLMapViewDelegate> 


+-(instancetype)initwithEventDispatcher:(RCTEventDispatcher *)eventDispatcher; 
-(void)setCenter:(CLLocationCoordinate2D)center; 
-(void)setZzoom: (double)zoomLevel; 


@end 
接 下 来 在 实现 ReactMapBoxView 的 文件 中 添加 一 个 eventDispatcher 的 实例 ， 定义 初始 化 方法 ， 
将 ReactMapBoxView 注 册 为 地 图 的 代理 以 便 接收 地 图 移动 事件 并 分 发 到 JavaScript 层 。 


// ReactMapBoxView.m 
#import "ReactMapBoxView.h" 
+#import "UIView+tReact.h" 








@implementation ReactMapBoxView { 
// 地 图 实例 
MGLMapView * _map; 


+ // eventDispatcher 实 例 
+ RCTEventDispatcher * _eventDispatcher; 


} 


+-(instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher 
+{ 
+ if (self = [super init]) { 


+ _eventDispatcher = eventDispatcher; 
+ } 

+ return self; 

+} 


+-(void)mapView: (ReactMapBoxView *)mapView regionDidChangeAnimated:(BOOL)animated 
+{ 


CLLocationCoordinate2D region = _map.centerCoordinate; 


NSDictionary *event = @{ 
@"target": self.reactTag, 
@"src": @{ 
@"latitude": @(region.latitude), 
@"longitude": @(region.longitude), 
@"zoom": [NSNumber numberWithDouble: 


++++++ + 二 


_map.zoomLevel] 

+ } 

+ [_eventDispatcher sendInputEventWithName:@"onRegionChanged" body:event]; 

+} 

在 regtonDidchangeAnimated 代 码 块 中 ， 我 们 取得 了 当前 的 地 图 坐标 并 构造 了 一 个 事件 字典 。 
它 将 会 被 分 发 给 React 组 件 的 回调 属性 ,可 以 通过 事件 对 象 的 target 属 性 来 识别 接收 事件 的 目标 组 
件 。target 属 性 通过 seLf .reactTag 获 取 React 节 点 的 ID。 再 强调 一 次 ，React 组 件 与 原生 组 件 以 这 
种 处 理 方式 通过 桥接 层 互相 识别 。 事 件 对 象 的 src 属 性 包含 了 表示 地 图 坐标 的 真实 数据 。 


















































hl 


图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 





2.3 创建 自 定 义 原 生 组 件 45 








ReactMapBoxView 已 经 接近 完成 ， 很 快 就 能 与 React 组 件 传 递 地 图 变化 数据 了 。 为 了 把 所 有 的 
工作 整合 起 来 ， 接 下 来 将 搭建 ReactMapBoxViewManager 用 于 注入 事件 分 发 侨 ， 并 定义 应 该 直接 传 
播 给 组 件 本 身 的 事件 ,以 及 组 件 属性 上 绑 定 的 回调 函数 。 如 果 你 跳 过 了 前 面 Android 系 统 的 章节 ， 
应 当 回 头 阅读 一 下 原生 事件 如 何 调用 React 组 件 的 回调 函数 那 一 部 分 。 


// ReactMapBoxViewManager .m 





























#import "RCTMapBoxViewManager.h" 
#import "ReactMapBoxView.h" 
#import "RCTBridge.h" 
+#import "RCTEventDispatcher.h" 


@implementation RCTMapBoxViewManager 





RCT_EXPORT_MODULE( ); 
@synthesize bridge = _bridge; 


-(UIView *)view 
{ 
- return [[ReactMapBoxView alloc] init]; 
+ return [[ReactMapBoxView alloc] initwithEventDispatcher:self.bridge.eventDispatcher]; 


} 


+-(NSArray *)customDirectEventTypes 
+{ 
+ return @[@"onRegionChanged"]; 


+} 


RCT_EXPORT_VIEW_PROPERTY(center, CLLocationCoordinate2D); 
RCT_EXPORT_VIEW_PROPERTY(zoom, double); 


@end 





现在 ，React 组 件 的 onRegionChanged 回 调 函 数 可 以 接收 用 户 移 动 地 图 的 事件 了 。 





2.3.3 JavaScript 





原生 组 件 已 经 就 绪 ， 下 面 要 在 JavaScript 层 为 它 定义 React 部 分 的 接口 。 此 人 处 将 会 定义 允许 的 
类 型 。 基 本 来 讲 ，React 组 件 只 需要 定义 组 件 接口 的 部 分 ， 不 需要 定义 完整 的 类 。 


// mapBox. js 





三 
其) 
| 本 








import {PropTypes} from "react '; 
import {requireNativeComponent, View} from 'react-native'; 


// 定义 暴露 给 原生 组 件 的 接口 
var iface = { 
name: 'MapBoxView', 
propTypes: { 
center: PropTypes.shape({ 
latitude: PropTypes.number, 
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longitude: PropTypes.number 
})， 
zoom: PropTypes.number, 
onRegionChanged: PropTypes.func, 
.. .View.propTypes 
} 
}; 


// export 语 和 揣 导 出 的 接口 ， 会 被 原生 组 件 导 入 成 JSX 组 件 来 使 用 

export default requireNativeComponent('ReactMapBoxView', iface); 

iface 对 象 中 定义 了 组 件 的 接口 ， 包 括 React 组 件 的 名 称 以 及 属性 类 型 。 任 何 原生 层 所 定义 的 
属性 都 必须 在 接口 中 定义 好 它们 的 类 型 。 如 果 有 任何 遗漏 ， 下 图 所 示 的 红色 警告 界面 会 通知 你 。 



































-MapView has no propType for native prop 
‘RCTMapBoxView.center of native type 
‘CLLocationCoordinate2D 

If you haven't changed this prop yourself, this 
usually means that your versions of the native 
code and JavaScript code are out of Sync， 
Updating both should make this error go away. 


verifyP ropTYpes 


verifyPropTypes,. js Q@ 50:8 


requireNativeComponent 
reaquiretlatliveComponent,. js SS 90:0 


<Unknown> 
Iap,]J5 外 1]5:0 








requireNativeComponent 方 法 将 根据 提供 的 名 称 ， 在 ViewManager 中 进行 查找 。Android 系 统 上 
要 匹配 视图 管理 器 的 getName() 方 法 ，iOS 系 统 要 匹配 Manager 以 外 的 类 名 或 者 传 给 
RCT_EXPORT_MODULE 宏 的 可 选 字符 串 。 

由 requireNativeComponent 方 法 准备 好 并 返回 的 组 件 ， 通 过 这 个 文件 导出 。 如 果 其 他 React 组 
件 想 要 使 用 该 组 件 ， 只 需 导 入 该 文件 即 可 。 


// screen.js 





























import React from 'react'; 
import MapBoxView from './mapBox'; 
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class Screen extends React.Component { 
render() { 
return ( 
<MapBoxView 
center={{ 
latitude: 40.7128, 
longitude: -74.0059 
}} 
zoom={8} 
onRegionChanged={event => console.log('region changed', event.nativeEvent.src)} 
/> 
); 
} 
} 


现在 你 已 经 了 解 原生 组 件 的 构建 方式 , 也 学 习 了 两 个 层级 之 间 如 何 互 相 协 助 来 维护 一 个 简单 
的 UI 组 件 展现 。 总 体 来 看 ，React Native 组 件 就 是 原生 组 件 ， 只 不 过 它 还 提供 了 一 个 代理 来 实现 
辕 性 的 映射 ， 以 及 负责 与 JavaScript 层 交互 的 媒介 。 





























2.4 原生 模块 


原生 模块 就 是 能 够 在 JavaScript 层 调用 的 API。 通 常 来 说 ， 开 发 它们 的 主要 目的 在 于 对 两 个 层 
级 之 间 的 请 求 进行 代理 。 第 1 章 已 经 提 过 , 两 层 之 间 所 有 的 序列 化 与 批 处 理 请 求 都 由 桥接 层 传输 。 
这 意味 着 对 原生 模块 的 全 部 请 求 都 要 异步 执行 。 如 果 原 生 方 法 需要 为 JavaScript 层 的 调用 返回 数 
据 ， 该 操作 将 通过 promise 或 者 回调 函数 来 完成 。React Native 为 这 两 种 方式 都 提供 了 接口 。 

对 原生 模块 进行 分 析 之 前 ， 先 要 知道 这 些 模块 可 以 访问 原生 层 的 一 切 。 它 们 就 是 JavaScript 
调用 Android 或 iOS SDK 的 入 口 。 原 生 模 块 可 以 访问 activity、 运 行 环境 、GPS、 存 储 空间 等 。 实 际 
上 你 创建 的 是 一 个 API，JavaScript 可 以 通过 它 访问 设备 原生 层 中 任何 你 所 需要 的 东西 。 









































2.4.1 剖析 原生 模块 

iOS 和 Android 对 原生 模块 的 具体 实现 差别 非常 大 ， 不 过 总 体 的 思路 是 相似 的 ， 如 下 所 示 。 

(1) 每 个 模块 继承 自 原生 模块 父 类 。 

(2) 每 个 模块 都 定义 了 名 称 ， 以 便 JavaScript 层 访问 。 

(3) 每 个 模块 都 导出 可 调用 的 方法 ， 并 包含 Java 的 注释 或 Objective-C 的 宏 。 

1. Android 

Android 平 台 的 原生 模块 继承 ReactCcontextBaseJavaModule, 并 日 必须 实现 getName 方 法 , 它 的 
返回 值 作为 JavaScript 模 块 的 名 称 。 

任何 允许 JavaScript 层 调用 的 方法 , 都 带 有 @ReactMethod 注 释 。 React 的 内 部 机 制 会 把 JavaScript 
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层 的 请 求 映射 到 这 些 方法 上 。 每 个 方法 的 身份 
任何 参数 都 会 被 转换 成 对 应 的 属性 类 型 。 




















它 的 签名 、 名 称 以 及 参数 进行 鉴别 。 方法 所 需 的 


public class ExampleModule extends ReactContextBaseJavaModule { 
public ExampleModule(ReactApplicationContext reactContext) { 


super(reactContext); 


@Override 
public String getName() { 
return "ExampleModule"; 


} 


@ReactMethod 
public void callableFunction() { 


Log.d(getName(), "Called native function"); 


} 
2.iOS 


























iOS 平 台 的 原生 模块 要 么 实现 了 RCTBridgeModule 协 议 ， 要 人 么 就 是 普通 的 Objective-C 类 。 它 们 





























通过 RCT_EXPORT_MODULE() 宏 把 自身 注册 成 原生 模块 。 这 个 宏 接受 一 个 可 选 的 参数 ， 用 来 定义 


JavaScript 层 的 模块 名 称 。 默 认 情 况 下 它 会 使 用 类 名 作为 模块 名 称 。 所 有 JavaScript 层 要 访问 的 方 


法 都 由 RCT_EXPORT_METHOD 宏 来 编写 。 


// ExampleModule.h 
#import "RCTBridgeModule.h" 

















@interface ExampleModule : 
@end 


// ExampleModule.m 
@implementation ExampleModule 


RCT_EXPORT_MODULE( 'Examp leModule' ); 
RCT_EXPORT_METHOD(callableFunction) 


{ 
RCTLogInfo(@"Called native function") 


NSObject <RCTBridgeModule> 











如 果 你 正在 开发 要 在 两 个 平台 运行 的 应 用 ， 




















最 好 尽 可 能 保持 API 名 称 一 致 。 如 果 不 可 能 完全 





保证 一 致 ， 那 么 可 以 通过 平台 相关 的 文件 在 JavaScript 层 暴露 通用 的 接口 ( 如 yourModule.android.js 


和 yourModule.ios.js ) 
3. JavaScript 











JavaScript 层 把 原生 模块 作为 NativeModules 对 象 的 一 个 属性 , 并 且 和 任何 带 有 @ReactMethod 注 释 
或 者 属于 RCT_EXPORT_METHOD 宏 的 方法 都 能 够 被 调用 。 
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import {NativeModules} from 'react-native'; 
const ExampleModule = {NativeModules}; 


ExampleModule.callableFunction(); 


2.4.2 参数 


原生 模块 的 方法 和 普通 方法 一 样 可 以 接受 参数 。React Native 在 提供 相关 信息 方面 做 得 非常 
好 。 除了 对 和 象 或 者 数组 以 外 的 所 有 参数 都 有 类 型 注释 。 在 JavaScript 代 码 中 传 了 错误 类 型 的 参数 或 
者 漏 传 了 某 个 参数 的 情况 下 ， 都 会 抛 出 错误 (这 点 一 定 要 注意 )。 如 果 参 数 是 对 象 或 者 数组 ， 那 
么 无 法 保证 它们 内 部 的 值 类 型 是 否 正确 。 

值得 注意 的 是 方法 签名 ( 包括 方法 名 和 参数 ), 在 Java 和 Objective-C 中 调用 方法 一 定 要 带 上 所 
定义 的 参数 。JavaScript 中 不 需要 这 么 做 。 但 是 当 你 从 JavaScript 层 调用 一 个 原生 方法 时 ， 一 定 要 
提供 方法 所 期 望 的 全 部 参数 。 如 果 你 要 开发 供 其 他 开发 者 使 用 的 第 三 方 模块 , 较 好 的 做 法 是 定义 
一 个 JavaScript 接 口 来 提供 默认 值 ， 以 防 使 用 者 没有 传人 期 望 的 全 部 参数 。( 或 者 直接 抛 出 异常， 
因为 参数 就 是 应 该 传人 。) 另外 带 有 @ReactMethod 注 释 的 方法 不 能 够 重 载 ， 每 个 方法 必须 拥有 独 
立 的 名 称 。 


@ReactMethod 

public void callableFunction (String foo, Integer bar, ReadableMap jsonObject){ 
ffs 

} 





















































RCT_EXPORT_METHOD(callableFunction:(NSString *)foo bar:(NSNumber *)bar jsonObject: 
NSDicationary *)jsonObject) { 

J ss 
} 


1. Android 


将 JSON 对 象 传 给 原生 模块 的 方法 时 ,它们 在 桥接 层 被 序列 化 ,到 了 原生 层 再 进行 反 序 列 化 。 
原生 层 会 创建 ReadableMap 类 型 的 数据 ， 这 种 类 型 与 普通 的 Map 类 似 ， 只 不 过 拥有 类 型 化 的 API 接 
口 〈 比如 getstring、getDouble 等 )。 它 同样 为 JavaScript 数 组 提供 了 ReadabtLeArray 接 口 。 


带 有 @ReactMethod 注 释 的 方法 支持 以 下 参数 类 型 。 


Boolean -> Bool 
Integar -> Number 
Double -> Number 

Float -> Number 

String -> String 
Callback -> function 
ReadableMap -> Object 
ReadableArray -> Array 
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2.iOS 


iOS 平 台 上 JSON 对 象 传 到 原生 层 会 被 转换 成 普通 的 NSDtcttonary 类 ，JavaScript 数 组 则 会 被 转 


换 成 NSArray 类 。RCT_EXPORT_METHOD 宏 支持 以 下 参数 类 型 。 


NSString -> String 

NSIntegar -> Number 

NSNumber -> Number 

COGFLoat -> Number 

float -> Number 

double -> Number 

BOOL -> boolean 
RCTResponseSenderBlock -> function 
NSDictionary -> Object 

NSArray -> Array 


2.4.3 回调 函数 和 promise 
由 于 所 有 的 通信 过 程 都 是 异步 的 ， 原 生 模 块 不 能 有 返回 值 。React Native 使 用 回调 函 























数 和 


promise 类 作为 解决 方案 。 使 用 方式 与 在 JavaScript 代 码 中 执行 回调 函数 以 及 promise 的 resolve/reject 
操作 完全 一 样 。 一 系列 的 参数 既 可 以 用 来 调用 回调 函数 ,也 可 以 让 promise 对 象 进 入 成 功 (resolved ) 











或 失败 (rejected ) 状态 。 只 要 把 回调 函数 或 者 promise 作 为 原生 模块 方法 的 最 终 参 数 ， 就 可 以 直 


接 使 用 了 ，React Native 会 完成 剩 下 的 工作 。 
1. 回调 函数 








原生 回调 函数 接口 遵循 两 个 参数 的 约定 : 第 一 参数 表示 错误 对 象 ( 没有 错误 的 情况 则 为 


nuLL )， 第 二 参数 用 来 提供 要 响应 的 数据 。 
e A 人 Android 


@ReactMethod 

public void add (int a, int b, Callback callback) { 
int sum =a+b; 
callback.invoke(null, sum); 


} 
e iOS 
RCT_EXPORT_METHOD(add: (NSNumber *)a b(NSNumber *)b callback(RCTResponseSenderBlock) 
callback) { 
NSNumber* sum = a + b; 


callback.invoke(@[[NSNuLL null], sum]); 
} 





值得 注意 的 是 iOS 在 实现 方式 上 的 差别 。 回 调 函 数 的 接口 接受 一 个 数组 参数 。 该 数组 的 内 容 





才 是 要 用 在 JavaScript 回 调 函 数 上 的 真正 参数 。 
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而 思 


e JavaScript 


import {NativeModules} from 'react-native'; 
const ExampleModule = {NativeModules}; 


ExampleModule.add(1, 2, function (error, sum) { 
if (error) { 
ConsoLe.Log('An exception occured', error); 
} elsef{ 
console.log(sum) // 3! 


} 
和 


2. promise 


promise 可 以 在 操作 成 功 后 把 值 返回 给 JavaScript 层 。 两 个 平台 对 它 的 实现 有 明显 的 不 同 ， 然 
想 是 一 致 的 。 响 应 要 么 成 功 要 么 失败 。JavaScript 层 的 接口 保留 了 我 们 所 熟悉 的 .then 和 .catch 























那么 


式 ， 


e A 人 Android 


Android 的 promise 接 口 暴露 了 resoLve 和 reject 方 法 。 如 果 promise 变 成 失败 〈rejected ) 状态 ， 
必须 提供 Throwable 类 的 对 象 。 


@ReactMethod 
public void failIfFalse (boolean value, Promise promise) { 
if (value) { 
promise.resolve("Your value was true, so it resolved."); 
} elsef 
promise.reject(new Error("Your value was false, so it rejected")); 
} 
} 


e iOS 
iOS 的 promise 同 时 拥有 resolver 和 rejecter 方 法 。 原 生 模 块 没有 采取 包含 两 个 方法 的 对 象形 
而 是 定义 了 两 个 参数 。 定 义 接收 promise 的 方法 时 使 用 与 RCT_EXPORT_METHOD 不 同 的 宏 : 


RCT_REMAP_METHOD。 


RCT_REMAP_METHOD(failIfFalse:(BOOL *) value, 
resolver:(RCTPromiseResolveBlock)resolve 
rejecter:(RCTPromiseRejectBlock)reject) 

{ 

if (value) { 
resolve(@"Your valuye was true, so it resolved"); 
} elsef{ 
reject(@"Your value was false, so ti rejected"); 
} 
} 
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e JavaScript 


import {NativeModules} from 'react-native'; 
const ExampleModule = {NativeModules}; 


ExampleModule.failIfFalse(true) 
.then(() => console.log('passed!')) // ”如 果 一 切 没有 问题 ， 那 就 通过 
.Catch(() => console.log('failed!')); 


返回 请 求 成 功 的 对 象 
我 们 已 经 了 解 到 ， 可 以 通过 回调 函数 和 promise 在 请 求 成 功 后 把 标量 值 返回 给 JavaScript 层 。 
大 多 数 情 况 下 响应 内 容 应 该 是 JSON 对 象 的 形式 。 
注意 : 可 以 返回 枚 举 类 型 和 类 ， 不 过 你 需要 实现 一 个 “转换 器 "。 关 于 “转换 器 ”的 讨论 将 
超出 本 章节 的 范畴 ， 不 过 你 可 以 在 React Native 文 档 中 有 关 原 生 模 块 的 部 分 去 查看 它 的 细节 。 
e Android 
Android 提 供 了 WritableMap 来 返回 JSON 响 应 。 该 接口 和 包含 特定 类 型 put 方 法 的 Map 很 相似 。 


口 putNULL 

口 putBoolean 
DQ putDouble 

口 putInt 

口 putString 


















































口 putArray 

口 putMap 

String 类 型 的 键 名 作为 每 个 方法 的 第 一 参数 。 第 二 参数 是 方法 名 相关 类 型 的 值 。 
@ReactMethod 


public void jsonResponse(Promise promise) { 
WritableMap jsonMap = new WritableNativeMap(); 
jsonMap.putString("stringValue", "A string"); 
jsonMap.putBoolean("booleanValue", true); 
jsonMap.putInt("intValue", 123); 
promise.resolve(jsonMap); 


} 

e iOS 

返回 JSON 对 象 和 接收 它 时 的 情况 相似 , 会 创建 一 个 NSDictionary 类 。 这 个 过 程 非常 直 白 , 不 
会 有 什么 村 路 。 


RCT_REMAP_METHOD( jsonResponse, 
resolver:(RCTPromiseResolveBlock)resolve 
rejecter:(RCTPromiseRejectBlock)reject) 








{ 
resolve(@{ 


图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 





2.4 原生 模块 53 





@"stringValue": @"A string", 
@"booleanValue": true, 
@"intValue": 123 

]); 


2.4.4 ”常量 





原生 模块 也 可 以 导出 常量 ， 供 JavaScript 访 问 。 


import {NativeModules} from 'react-native'; 
const ExampleModule = {NativeModules}; 


console.log(ExampleModule.HELLO) // world 
console.log(ExampleModule.F00) // foo 











JavaScript 模 块 访问 常量 的 过 程 是 同步 的 , 并 且 会 把 它们 作为 自己 的 属性 。 只 要 你 写 下 了 第 


条 NativeModules 的 import 声 明 , 常量 属性 在 应 用 的 整个 生命 周期 都 可 用 。 除了 常量 以 外 的 任何 变 
量 都 应 该 通过 模块 的 方法 来 访问 。 可 以 把 它们 看 作 传 统 的 静态 常量 。 
























































要 使 原生 模块 的 常量 可 用 ， 需 要 实现 父 类 的 getConstants ( Android ) 或 constantsToExport 
(iOS ) 方法 ， 这 两 个 方法 将 返回 键 值 对 的 映射 ， 键 名 会 作为 JavaScript 模 块 的 属性 而 存在 。 

1. Android 

实现 getConstants 方 法 用 于 返回 包含 要 导出 的 常量 的 Map。 


@Override 

public Map<String, Object> getConstants() { 
final Map<String, Object> constants = new HashMap<>(); 
constants.put("HELLO", "world"); 
constants.put("F00", "bar"); 

} 


2.iOS 


实现 constantsToExport 方 法 用 于 返回 包含 要 导出 的 常量 的 NSDictionary。 


- (NSDictionary *)constantsToExport 
{ 
return @{ 
@"HELLO": @"world", 
@"F00": "bar" 
}; 








2.4.5 事件 
DeviceEventEmitter 模 块 用 于 把 事件 从 原生 层 传 到 JavaScript 层 。 


import {DeviceEventEmitter} from 'react-native'; 
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DeviceEventEmitter .addListener('customEvent', e => { 
console.log('received event', e.nativeEvent.param); 


}); 
两 个 平台 依然 遵循 相同 的 思想 ， 但 分 别提 供 了 不 同 的 实现 细节 。 
1. Android 





ReactContext 暴 露出 getJSModute 方 法 用 于 获取 其 他 模块 ， 为 它 传人 类 参数 后 返回 相应 的 实 
例 。 它 将 用 来 获取 RCTDeviceEventEmitter 模 块 并 调用 emit 方 法 ,接着 事件 就 会 通过 桥接 层 发 送 到 
JavaScript 层 ,DeviceEventEmitter 模 块 的 监听 器 就 会 捕获 这 个 事件 ,并 通知 其 他 任意 的 事件 监听 器 。 


用 WritableMap 类 型 创建 事件 对 象 。 












































@ReactMethod 
public void sendTestEvent() { 
String eventName = "customEvent"; 


WritableMap params = new WritableNativeMap(); 
params.putString("param", "Hello world"); 


getReactApplicationContext() 
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter .class) 
.emit(eventName, params); 


} 
2.iOS 
在 iOS 上 直接 通过 对 桥接 层 的 引用 触发 事件 。 与 Android 的 代码 示例 类 似 ，JavaScript 层 的 


DeviceEventEmitter 会 接收 这 些 事件 。 


创建 的 事件 对 象 为 NSDicttonary 类 。 


@implementation ExampleModule 














@synthesize bridge = _bridge; 


- (void) sendTestEvent 


{ 
NSString *eventName = @"customEvent" 
NSDictionary *params = @{@"param": @"Hello world"}; 


[self.bridge.eventDispatcher sendAppEventWithName:eventName 
body:params]; 
} 


3. JavaScript 


为 了 让 这 个 示例 更 加 完整 ， 来 看 一 下 所 有 部 分 的 整合 。 当 调用 了 原生 模块 的 sendTestEvent 
方法 后 ， 应 该 会 接收 到 来 自 DeviceEventEmitter 模 块 的 事件 。 


import {DeviceEventEmitter, NativeModules} from 'react-native'; 
const {ExampleModule} = NativeModules; 
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DeviceEventEmitter.addListener('customEvent', e => { 
console. log('received event', e.nativeEvent.param); // 2 


}); 


ExampleModules.sendTestEvent(); // 1 


2.5 示例 


接 下 来 看 一 个 完整 的 原生 模块 实现 ,我 们 将 创建 一 个 模块 用 于 获取 设备 电量 水 平 以 及 状态 数 
据 ， 并 且 在 数据 发 生变 化 时 可 以 接收 到 事件 。 我 们 还 将 把 它 与 React 组 件 绑 定 ， 以 便 在 应 用 中 显 
示 一 个 电池 图 标 。 这 个 示例 将 阐明 原生 模块 如 何 直接 连接 AndroidO 和 iOS 的 SDK。 该 原生 模块 的 代 
码 可 以 在 网 页 https://github.com/robinpowered/react-native-device-battery 上 找到 。 


模块 暴露 的 方法 可 以 用 于 获取 电量 水 平 以 及 状态 数据 ， 并 且 与 DevitceEventEmitter 进 行 绑 定 
后 可 以 接收 电量 数据 发 生 改 变 的 事件 。 
DeviceBattery.isCharging().then(isCharing => { 
// 布尔 值 LsCharging 指 示 设 备 是 否 正在 充电 或 者 已 耗 尽 电量 
]); 



































DeviceBattery.getBatteryLevel().then(level => { 
// level 值 处 于 0 和 1 之 间 ， 表 示 电 量 百分比 
}); 


DeviceEventEmitter .addListener('batteryChange', event => { 
// event.charging 包 含 布 尔 值 
// event.level 和 包含 小 数值 


3 


2.5.1 Android 


为 了 访问 Android 设 备 的 电池 信息 ,我 们 从 模块 内 部 直接 调用 Android SDK。BroadcastReceiver 
和 FilteredIntent 这 两 个 类 用 来 接收 电量 水 平和 充电 状态 改变 的 信息 。 模 块 初始 化 时 会 注册 
receiver 以 及 过 滤 后 的 intent， 并 暴露 出 两 个 带 有 @ReactMethods 的 方法 ，getBatteryLevel 和 
isCharging。JavaScript 调 用 了 这 些 方 法 后 ， 从 FilteredIntent 中 提取 电量 水 平 以 及 状态 。 电 池 数 
据 也 就 从 原生 层 流 向 JavaScript 层 。 一 旦 电量 水 平 或 者 充电 状态 发 生 改 变 ， 就 问 JavaScript 层 发 出 
消息 ， 传 递 包 含 电池 数据 的 JSON 对 象 。 


class DeviceBatteryModule extends ReactContextBaseJavaModule 
implements LifecycleEventListener { 











public static final String REACT_MODULE = "DeviceBattery"; 
public static final String EVENT_NAME = "batteryChange"; 
public static final String IS_CHARGING_KEY = "charging"; 
public static final String BATTERY_LEVEL _ KEY = "level"; 
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private Intent batteryStatusIntent = null; 
private @Nullable PowerConnectionReceiver batteryStateReceiver; 


public DeviceBatteryModule(ReactApplicationContext reactApplicationContext) { 
super(reactApplicationContext); 


} 


@Override 

public String getName() { 
return REACT_MODULE; 

} 


@Override 

public void initialize() { 
// 一 般 来 说 最 好 当 模 块 执行 到 生命 周期 的 initialize 部 分 时 ， 设 置 receiver 
// 在 ReactNative 生 命 周 期 中 ， 在 构造 函数 中 这 样 做 可 能 太 早 了 (在 应 用 就 绪 之 前 ) 
Super .initiaLize(); 
getReactApplicationContext().addLifecycleEventListener(this); 
maybeRegisterReceiver(); 


} 


/** 
* 获取 电量 水 平 的 React 方 法 
* 通过 promise 返 回 数据 
点 / 
@ReactMethod 
public void getBatteryLevel(Promise promise) { 
if (batteryStatusIntent != nuLL) { 


// 把 电量 水 平 返回 给 ]S 层 
promise.resolve((double) getBatteryPercentageFromIntent(batteryStatusIntent) ) ; 
} etLse 
promise.reject(new Error("BatteryManager is not active")); 
} 
} 
/** 


* 获取 电池 充电 状态 的 React 方 法 
* 通过 promise 返 回 数据 
* 
/ 
@ReactMethod 
public void isCharging(Promise promise) { 
if (batteryStatusIntent != nuLL) { 
// 把 充电 状态 返回 给 ]S 层 
promise.resolve(getIsChargingFromIntent(batteryStatusIntent)); 
} elsef 
promise.reject(new Error("BatteryManager is not active")) 
} 
} 
/** 
* 电量 水 平和 充电 状态 发 生 改 变 时 被 调用 
* 电量 水 平和 充电 状态 会 被 传播 给 JavaScript 层 
* 
/ 
protected void notifyBatteryStateChanged(Intent intent) { 
// 如 果 访 问 不 到 桥接 层 ， 不 要 尝试 传播 事件 
// 这 将 会 导致 “没有 模块 正在 运行 ”异常 (无 法 访问 RCTDeviceEventEmitter) 
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if (getReactApplicationContext().hasActiveCatalystInstance()) { 
// 创建 包含 电池 数据 的 事件 载荷 对 象 
WritableMap params = getJSMap(intent); 


// 当 电池 状态 发 生 改 变 时 ， 通 知 ]S 层 
getReactApplicationContext() 
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter .class) 
.emit(EVENT_NAME, params); 
} 
} 


@Override 

public void onHostResume() { 
// 应 用 恢复 运行 时 创建 receiver 
maybeRegisterReceiver(); 


} 


@Override 

public void onHostPause() { 
// 应 用 暂停 运行 时 拆 解 receiver 
maybeUnregisterReceiver(); 
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@Override 

public void onHostDestroy() { 
// 应 用 停止 运行 时 拆 解 receiver 
maybeUnregisterReceiver(); 


} 


/** 
* 如 果 尚 未 注册 receiver， 进 行 注册 
* 
/ 
private void maybeRegisterReceiver() { 
if (batteryStateReceiver != null) { 
return; 
} 
batteryStateReceiver = new BroadcastReceiver() { 
@Override 
public void onReceive(Context context, Intent intent) { 
// 当 电池 状态 发 生 改 变 时 ， 通 知 ]S 层 
notifyBatteryStateChanged(intent); 
} 


} 
IntentFilter filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED); 


batteryStatusIntent = getReactApplicationContext() 
.registerReceiver(batteryStateReceiver, filter); 


} 


/** 
* 如 果 存 在 receiver， 注 销 它 
*/ 
private void maybeUnregisterReceiver() { 
if (batteryStateReceiver != nuLL) { 
return ; 
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} 
getReactApplicationContext().unregisterReceiver(batteryStateReceiver); 
batteryStateReceiver = null; 
batteryStatusIntent = null; 

} 


/** 

* 从 intent 中 提取 电量 水 平 数据 

*/ 

private float getBatteryPercentageFromIntent(Intent intent) { 
int level = intent.getIntExtra(BatteryManager .EXTRA_LEVEL, -1); 
int scale = intent.getIntExtra(BatteryManager .EXTRA_SCALE, -1); 
return level / (float) scale; 


} 


/** 
* 从 intent 中 提取 充电 状态 数据 
* 
/ 
private boolean getIsChargingFromIntent(Intent intent) { 
int status = intent.getIntExtra(BatteryManager .EXTRA_STATUS, -1); 
return ( 
status == BatteryManager .BATTERY_STATUS_CHARGING || 
status == BatteryManager .BATTERY_STSTUS_FULL 
); 
} 


/** 

* 构造 包含 电池 数据 的 WritableMap (JSON 载 荷 ) 

* 
/ 

private WritableMap getJSMap(Intent intent) { 
WritableMap map = new WritableNativeMap(); 
map.putDouble(IS_CHARGING_KEY, getIsChargingFromIntent(intent)); 
map.putDouble(BATTERY_LEVEL_KEY, getBatteryPercentageFromIntent(intent)); 
return map; 

} 

} 


需要 重点 关注 的 方法 有 以 下 三 个 。 


DQ getBatteryLevel 
D isCharging 
DQ notifyBatteryStateChanged 


以 上 都 是 JavaScript 层 的 接口 , 直接 访问 Android 的 原生 部 分 。 当 getBatteryLeve1 或 tsCharging 
方法 被 调用 后 ， 它 们 会 从 包含 电池 数据 的 intent 中 提取 数据 。 当 电池 状态 发 生 改 变 时 ， 
notifyBatteryStateChanged 方 法 被 触发 ， 并 把 电池 数据 传 给 JavaScript 层 。 

这 个 例子 很 好 地 展示 了 原生 模块 的 紧密 结合 ， 使 得 原本 看 似 受 限 或 不 可 访问 的 Android SDK 
可 以 被 JavaScript 直 接 访问 。 本 模块 的 代码 既 不 复杂 也 不 庞大 , 大 部 分 内 容 都 是 关于 恰当 地 创建 和 
拆 解 BroadcastReceiver ， 其 余 的 部 分 仅仅 是 将 其 与 ReactMethods 还 有 事件 触发 器 捆绑 到 一 起 。 
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2.5.2 iOS 


iOS 的 原生 模块 暴露 了 同样 的 接口 和 能 力 ， 定 义 了 isCharging 和 getBatteryLevel 方 法 ， 两 者 
都 返回 promise， 以 及 电池 状态 变化 的 处 理 函 数 ， 通 过 DeviceEventEmitter 传 播 电池 状态 。iOS 通 
过 UIDevice 访 问 电量 水 平 以 及 充电 状态 数据 ， 并 通过 NSNotificationCenter 来 订阅 电池 状态 变化 
的 消息 。 

// DeviceBattery.h 

#import <Foundation/Foundation.h> 

#import "RCTBridgeModule.h" 


#import "RCTBridge.h" 
#import "RCTEventDispatcher.h" 









































@interface DeviceBattery : NSObject<RCTBridgeModule> 
@end 


// DeviceBattery.m 

#import "DeviceBattery.h" 
#import "RCTBridge.h" 

#import "RCTEventDispatcher.h" 


@implementation DeviceBattery 
@synthesize bridge = _bridge; 


RCT_EXPORT_MODULE( ); 


-(instancetype)init 


{ 


if((self = [super init])) { 
[[UIDevice currentDevice] setBatteryMonitoringEnabled:YES]; 


// 订阅 电池 状态 改变 的 消息 
[[NSNotificationCenter defauLtCenter] add0bserver :seLf 
selctor:@selector(batteryLevelChanged:) 
name:UIDeviceBatteryLevel- 
DidChangeNotification 
object:nil]; 
[[NSNotificationCenter defauLtCenter] addObserver:self 
selector:@selector(batteryLevelChanged:) 
name:UIDeviceBatteryState- 
DidChangeNotification 
object:nil]; 
} 


return self; 


} 


RCT_REMAP_METHOD(iLsCharging, 
isChargingResolver:(RCTPromiseResolveBlock)resolve 
isChargingRejecter:(RCTPromiseRejectBlock)reject) 

{ 


UIDeviceBatteryState batteryState = [UIDevice currentDevice].batteryState; 
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// 把 充电 状态 数据 返回 给 ]S 层 
if (batteryState == UIDeviceBatteryStateCharging) { 
resolve(@YES); 
} else{ 
resolve(@NO); 
} 
} 


RCT_REMAP_METHOD(getBatteryLevel, 
batteryLevelResolver:(RCTPromiseResolveBlock)resolve 
batteryLevelRejecter:(RCTPromiseRejectBlock)reject) 

{ 

// 把 电量 水 平 数据 返回 JS 层 
float batteryLevel = [UIDevice currentDevice].batteryLevel; 
resolve(@(batteryLevel)); 

} 


-(void)batteryLevelChanged: (NSNotification *)notification 
{ 
NSMutableDictionary* payLoad = [NSMutableDictionary dictionaryWithCapacity: 2]; 


// 收集 充电 状态 和 电量 水 平 数 据 
bool isCharging = [UIDevice currentDevice].batteryState == UIDeviceBatteryStateCharging; 
float batteryLevel = [UIDevice currentDevicel].level; 


// 把 包含 充电 状态 和 电量 水 平 数据 的 事件 传播 给 原生 层 

[payLoad setObject:[NSNumber numberWithBool:isCharging] forKey:@"charging"]; 
[payLoad setObject:[NSNumber numberWithFloat:batteryLevel] forKkey:@"level"]; 
[seLf.bridge.eventDispatcher sendDeviceEventWithName:@"batteryChange" body:payload]; 
} 


-(void)delloc 
{ 
// 模块 销毁 后 拆 解 观察 者 (observer) 
[[NSNotificationCenter defauLtCenter] remove0bserver :seLf]; 


} 

@end 

init 代 码 块 中 创建 了 观察 电池 状态 变化 的 观察 者 (observer ) 。 如 果 充 电 状 态 或 者 电量 水 平 
发 生变 化 , 观察 者 会 调用 batteryLevelCchanged 方 法 。 该 方法 内 访问 了 包含 电池 充电 状态 和 电量 水 
平 的 [UIDevice currentDevice]。 接 着 生成 事件 对 象 并 分 发 到 JavaScript 层 。 

JavaScript 调 用 另外 两 个 方法 完成 同样 的 任务 ， 访 问 UIDevice 的 电池 属性 并 用 promise 返 回 
数据 。 


















































2.5.3 _ JavaScript 


接 下 来 把 刚刚 编写 的 原生 模块 放 到 真实 的 示例 中 使 用 。 我 们 想 要 显示 一 个 电池 条 来 指示 当前 
的 电量 水 平 以 及 充电 状态 。 电 池 条 将 显示 三 种 颜色 来 表示 不 同 的 电池 状态 : 红色 表示 电量 低 , 绿 
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色 表 示 正 在 充电 ， 其 他 情况 下 显示 为 白色 。 电 池 充 电 的 过 程 中 ， 电 池 条 会 逐渐 填 


import React from 'react'; 
import {NativeModules} from 'react-native’'; 
const {DeviceBattery} = NativeModules; 


class BatteryICon extends React.Component { 
constructor(props) { 
super(props); 


// 这 里 初始 化 默认 状态 ， 等 组 件 挂 载 时 立刻 更 新 
// 也 可 以 在 此 调用 原生 模块 
this.state = { 
battery: {level: 0, charging: false} 
}; 
} 
componentWillMount() { 
// 订阅 电量 水 平 /充电 状态 的 改动 
this.batteryListener = DeviceBattery.addListener( 
'batteryChange', 
({charging, level}) => this.setState({charging, level}) 
); 


// 当 组 件 挂 载 后 ， 获 取 电 量 水 平和 充电 状态 
DeviceBattery.isCharging().then(charging => this.setState({charging})); 
DeviceBattery.getBatteryLevel().then(level => this.setState({level})); 
} 
componentWillUnmount() { 
// 总 是 在 组 件 即将 却 载 时 移 除 所 有 监听 器 


this.batteryListener .remove(); 


} 
render() { 
const {charging, level} = this. state; 
return ( 
<View style={styles.container}> 
{/* 显 示 电 量 水 平 */} 
<Text>{Math.round(level * 100)}%</Text> 
{/* 显 示 成 电池 条 的 形式 */} 
<PowerBar charging={charging} level={level} /> 
</View> 
) 
} 


} 


function PowerBar ({charging, level}) { 
// 电池 条 填充 的 宽度 ， 以 百 分 之 一 为 单位 
const fillPercentage = level / 100; 
// 电池 条 的 背景 色 
// 电量 <20 为 红色 
// 充电 为 绿色 
// 未 充电 且 电 量 >20 为 白色 
const backgroundColor = level <= 20 ? 'red' : charging ? 'green 
return ( 
<View style={styles.batteryContainer}> 


: 'white'; 


图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 








62 第 2 章 原生 模块 与 组 件 





<View style={[styles.batteryBar, {flex: fillPercentage, backgroundColor}]} /> 
<View style={{flex: 1 - fillPpercentage}} /> 
</View> 
); 
} 
从 react-native 中 导入 NativeModules, 并 通过 它 的 属性 访问 DeviceBattery 模 块 。 在 组 件 挂 载 
时 添加 一 个 DeviceBattery 模 块 的 监听 器 ， 用 于 监测 任何 的 数据 变动 。 之 前 我 们 已 经 编写 好 代码 
让 原生 模块 传播 充电 状态 和 电量 水 平 数 据 。 一 旦 接收 到 数据 ， 就 根据 它们 来 更 新 组 件 状 态 。 
第 一 次 显示 组 件 时 ， 由 于 事件 不 会 立刻 传播 过 来 ,我们 要 执行 初始 的 getBatteryLevel 和 
isCharging 请 求 来 获取 数据 。 这 两 个 方法 通过 promise 返 回 的 结果 会 被 写 到 状态 中 。 
此 刻 我 们 已 经 从 原生 模块 获取 了 一 切 所 需 的 数据 ， 接 下 来 就 可 以 把 它们 展示 出 来 了 。 
























































2.5.4 注意 事项 : 线程 

原生 模块 不 应 该 关心 哪个 线程 调用 了 它 。React Native 还 处 于 逐渐 成 熟 的 过 程 ， 无 法 保证 它 
的 机 制 (也 就 是 内 部 的 实现 细节 ) 在 未 来 会 不 会 保持 现状 。 

回想 一 下 桥接 层 在 两 层 之 间 批 量 执行 异步 通信 的 过 程 。 如 果 一 个 原生 模块 有 阻塞 请 求 的 可 
能 ,就 应 该 延缓 繁重 的 操作 并 把 它们 交 给 内 部 管理 的 工作 进程 。 一 条 阻塞 的 请 求 会 延迟 同一 批 处 
理 队列 中 其 他 请 求 的 执行 。 

在 iOS 系 统 中 ， 如 果 某 个 方法 需要 在 主线 程 上 执行 ， 原 生 模 块 可 以 像 下 面 这样 写 。 


-(dispatch_queue_t)methodQueue 

































































return dispatch get_ main_queue(); 


} 


类 似 地 ， 如 果 某 些 方法 会 造成 阻塞 请 求 的 代价 ， 它 可 以 创建 自己 的 队列 。 下 面 的 代码 以 
RCTAsyncLocalStorage 为 例 。 


-(dispatch_queue_t)methodQueue 


{ 
return dispatch_queue_create("com.facebook.React.AsyncLocalStorageQueue", 
DISPATCH_QUEUE_SERIAL); 


} 


值得 注意 的 是 ，methodQueue 将 会 指定 模块 中 所 有 方法 的 行为 。dispatch_async 可 以 用 来 在 独 
立 队列 中 执行 任务 。 
RCT_EXPORT_METHOD(doSomethignExpensive:(NSString *)param callback:(RCTRespon- 


seSenderBlock)callback) 


{ 
dispatch_async(dispatch_get_gLobaL_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT，0)， 


八 


// 在 后 台 线 程 执行 任务 
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/1 回调 函数 可 以 被 任意 线程 或 队列 调用 
callback(@[...]); 


}) 
} 


在 Android 平 台 上 可 以 新 建 一 个 Runnable， 当 需要 返回 数据 时 ,可 以 在 Runnable 内 部 安全 地 调 
用 回调 函数 或 者 promise。 








2.5.5 注意 事项 : Swift 
原生 模块 可 以 用 Swift 来 编写 ， 不 过 需要 在 Objective-C 宏 的 帮助 下 把 方法 注册 到 桥接 层 。 
把 ExampLeModute 的 代码 写成 Swift 类 ， 如 下 所 示 。 


// ExampLeModuLe .swift 
































@objc(ExampleModule) 
class ExampleModule : NSObject { 


@objc func callableMethod(foo: String, bar: String) -> Void { 


i 
} 


一 个 私有 文件 将 用 来 把 模块 和 模块 方法 注册 到 桥接 层 。RCT_EXTERN_MODULE 和 RCT_EXTERN_METHOD 
宏 会 创建 映射 关系 与 Swift 类 的 实现 进行 关联 。 


// ExampleModule.m 
#import "RCTBridgeModule.h" 











ar 








@interface RCT_EXTERN_MODULE(ExampleModule, NSOBject) 
RCT_EXTERN_METHOD(callableMethod: (NSString *)foo bar:(NSString *)bar) 


@end 
最 后 一 点 ， 在 一 个 iOS 项 目 中 用 两 种 语言 混合 开发 时 ， 总 是 需要 引入 桥接 文件 。 


// ExampleModule-Bridging-Header.h 
#import "RCTBridgeModule.h" 


2.6 ”链接 模块 和 组 件 


本 节 内 容 只 针对 Android 平 台 。 

在 Android 平 台 上 ， 所 有 自 定义 组 件 和 模块 都 要 用 ReactActivity 进 行 注 册 ， 以 便 React Native 
找到 它们 。ReactActivity 的 getPackages 方 法 在 MainActivity 中 实现 。 上 默认 情况 下 , 它 返 回 一 个 列 
表 ， 并 以 MainReactPackage 作 为 唯一 的 入 口 。 这 个 包 内 含有 React Native 自 带 的 所 有 核心 原生 模块 
和 组 件 。Android 平 台 的 实现 很 优雅 ， 考 虑 到 了 原生 模块 和 组 件 层 的 核心 activity 以 及 桥接 层 的 解 
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耦 。 所 有 模块 和 组 件 都 在 ReactPackage 中 注 和 人 到 整个 项 目 中 。 
在 iOS 平 台 上 ， 整 个 应 用 都 可 以 通过 RCT_EXPORT_MoDULE 宏 来 访问 所 有 模块 和 组 件 。 
ReactPackage 接 口 提供 了 三 个 方法 。 


口 createNativeModules 一 一 包含 所 有 自 定义 的 原生 模块 。 

口 createJSModules 没有 使 用 过 而 且 没 有 文档 说 明 ， 不 过 可 以 用 它 把 JavaScript 模 块 注册 
到 Catalyst 实 例 上 ， 但 是 无 法 保证 其 会 成 为 主 文件 包 的 一 部 分 。 

口 createViewManagers 一 一 包含 所 有 自 定 义 的 原生 视图 管理 器 。 


我 们 将 用 到 前 文 编写 的 示例 ， 把 组 件 和 模块 添加 到 新 的 项 目 中 。DeviceBattery 作 为 自 定义 
模块 ，ReactMapBoxViewManager 作 为 自 定义 UI 组 件 ， 我们 要 为 它 提供 支持 。 


创建 自 定义 包 文件 。 


public class YourAppPackage implements ReactPackage { 
@Override 
protected List<NativeModule> createNativeModules(ReactApplicationContext 
reactApplicationContext) { 
return Arrays.<NativeModule>asList( 
new DeviceBattery(reactApplicationContext) // 自 定义 模块 
); 
} 





T 



























































@Override 
public List<Class<? extends JavaScriptModule>> createJSModules() { 
return Collections.emptyList(); 


} 


@Override 
public List<ViewManager> createViewManagers(ReactApplicationContext 
reactApplicationContext) { 
return Arrays.<ViewManager>asList( 
new ReactMapBoxViewManager() // 自 定 义 视图 管理 器 
); 
} 
} 


这 个 类 接 下 来 会 在 MainActivity 中 作为 getpPackages 的 一 部 分 被 实例 化 。 


// MainActivity.java 
class MainActivity extends ReactActivity { 


ee 


@Override 
protected List<ReactPackage> getPackages() { 
return Arrays.<ReactPackage>asList( 
new MainReactPackage(),，// 默认 情况 下 ， 包 含 所 有 核心 模块 和 组 件 
new ExamplePackage() // 所 有 自 定 义 模块 和 组 件 
); 
} 
} 
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现在 ReactPackage 已 经 注册 到 React Native 中 了 , 应 用 的 JavaScript 层 和 原生 层 都 可 以 访问 自 定 
义 的 模块 和 组 件 。 


链接 第 三 方 库 

ReactNative 的 模块 和 组 件 可 以 写成 项 目 外 部 依赖 的 形式 ， 而 不 用 创建 整个 React Native 项 目 。 
第 三 方 React Native 模 块 的 安装 方式 和 一 般 的 Node 模 块 一 样 ， 通 过 npm install 命 令 安装 。 把 它们 
正确 地 链接 到 原生 层 之 前 ， 还 有 几 步 操作 要 手动 完成 。 因 此 出 现 了 React Native 包 管理 需 rnpm 来 
自动 执行 这 个 链接 过 程 。 

先 来 看 一 下 手动 链接 过 程 。 我 们 想 要 安装 react-native-device-battery 模 块 ， 也 就 是 之 前 用 
来 访问 电池 电量 和 状态 的 原生 模块 。 

第 一 步 ， 运 行 npm install react-native-device-battery --save 以 将 模块 添加 到 项 目 中 。 这 
步 操 作 将 会 把 依赖 安装 到 node_modules/react-native-device-battery 目 录 下 。 




















1.iOS 


用 XCode 打 开 iOS 项 目 ， 同 时 打开 Finder 窗 口 并 前 往 项 目的 node modules/react-native- 
device-battery 目 录 ， 在 该 日 录 下 找到 ios/ 目 录 下 的 DeviceBattery.xcodeproj 文 件 ， 把 它 拖 到 XCode 
文件 树 的 Libraries 分 组 中 。 


gRNApps: Ready | Today at 7:09 Ph 2 








™ 9 DeconstructingRNApps 从 3 General Capabilities Resource Tags Info Build Settings Build Phases 
» MN DeconstructingRNApps 







v | Libraries 
> 加 React.xcodat] 
Bundle Identifier .org.reactjs.native.example.Deconstru 


> 图 RcTGeolocatioN a 
* 加 RCTImage xcodeproj 
» @ RcTLinking .xcodeproj Build 1 
> @ RCTNetwork.xcodeproj 
» 图 RCTSettings.xcodeproj Team None $ 
* @ RCTText.xcodeproj 
> @ RCTVibration xcodeproj Y Deployment Info 
* 加 RCTWebsocketxcodeprai 
上 状 DeconstructingRNAppsTests Deployment Target 
* 恩 products Devices | iphone $ 
< 
Wi android > react * MM android * 人 DeviceBattery 
国 Deskiop @ index.android.js not » 二 index.js 回 DeviceBattery.xcodeproj 
人 index.iosjs [本 react-native-device-battery * 1 ios > 
国 Robin 大 ios a 现 package.json 
阐 Development 国 node_modules 人 README.md 





人 packagejson 


央 TimeCapsule 

全 ajwhite 

Q AirDrop 

人 A: Applications 

i Pictures 

加 Documents 

+】 Downloads 
Devices 

加 Atticus's MacBo... 


图 Remote Disc 
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下 一 步 ， 切 换 到 Build Settings 标 签 ， 展 开 Link Binary With Libraries 分 组 ， 点 击 加 号 按钮 。 接 
着 会 弹出 所 有 可 供 链接 的 二 进 制 文件 列表 , 列表 顶部 的 Workspace 文 件 夹 下 有 一 个 DeviceBattery.a 
文件 ， 选 择 并 把 它 添加 到 已 链接 的 二 进 制 文件 中 。 


























喝 DeconstructingRNApps | Choose frameworks and libraries to add: | < 
品 和 AA DeconstructingRNApps $ Genel Q Build Phases Build Rules 
到 
4: ™ Ml Workspace pr 
可 libDeviceBattery.a 
Pb Target Dependencies (0 items) 一 A 
vi0s 9.3 
二 Accelerate .fi & 
pb Compile Sources (2 items) 鲁 ND x 
办 Accounts.framework 
Y Link Binary With Libraries (10 items} ee x 
禾 ] AddressBookUl.framework 
Name 请 | AdSupport.framework 
By libReact.a 请 | AssetsLibrary.framework Required 人 
亿 iibRcTActionshet 请 | AudioToolbox.framework Required 人 
总 libRcTGeolocatio 畏 AudioUnitframework Required 人 
汪 ibRcTimage.a 办 AVFoundation.framework Required 人 
FR 请 | AVKit.framework - 
Ey libRCTLinking.a Required 人 
bundle1.o 
Ey libRCTNetwork.a 5 Required 人 
CarrierBundleUtilities.tbd 
Ey libRCTSettings.a 请 CFNetwork:framework Required 人 
By libRCTText.a 请 cloudkitframework Required 人 
Ey libRCTVibration.a Required 人 
态 ibRcTWwebsockel Add Other- cancl | EE Required 人 
十 rn 
Pp Copy Bundle Resources (2 items) x 
pb Bundle React Native code and images x 








此 时 一 切 文件 都 正确 地 链接 完毕 ， 可 以 编译 项 目 了 。 链接 模块 已 经 就 绕 ， 可 供 使 用 ,除非 某 
个 依赖 项 的 库 需 要 在 AppDelegate 中 进行 初始 化 。 

2. Android 

在 Android 平 台 上 我 们 主要 对 gradle 文 件 进 行 编辑 ， 并 把 依赖 添加 到 MainActivity 的 
ReactPackages 列 表 中 。 

首先 打开 android/settings.gradle 设 置 文件 ， 添 加 以 下 代码 。 

















rootProject.name = 'NameOfYourProject' 
include ':app' 
+include ' :react-native-device-battery 


+project(':react-native-device-battery').projectDir = new File( 
+ rootDir, '../node_modules/react-native-device-battery') 


接着 在 构建 文件 android/app/build.gradle 中 添加 一 行 代码 。 


注意 : 有 两 个 build.gradle 文 件 , 一 个 是 android/build.gradle, 而 要 编辑 的 那个 是 android/app. 
build.gradle 。 


如 下 所 示 ，dependencies 部 分 添加 了 一 行 代码 ， 该 部 分 通常 位 于 文件 最 后 。 
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dependencies { 
compile fileTree(dir: "libs", include: ["*.jar"]) 
compile "com.android.support:appcompat-v7:23.0.1" 
compile "com.facebook.react:react-native:+" 

+ Compile project(':react-native-device-battery') 


} 
最 后 ,打开 MainActivityjava, 把 依赖 项 的 ReactPackage 添 加 到 getPackages 方 法 返回 的 集合 中 。 


// MainActivity.java 
+import com.robinpowered.react.DeviceBatteryPackage; 


class MainActivity extends ReactActivity { 


/11 ..， 





@Override 
protected List<ReactPackage> getPackages() { 
return Arrays.<ReactPackage>asList( 
new MainReactPackage() ， 
十 new DeviceBatteryPackage() 
); 
} 
} 


现在 整个 应 用 都 可 以 访问 刚刚 添加 的 模块 了 。 

3. rnpm 

如 前 文 所 示 ， 链 接 React Native 依 赖 的 过 程 需要 相当 多 的 手动 操作 。 我 们 要 把 这 种 做 法 抛 之 
脑 后 ， 转 而 使 用 一 个 新 的 工具 rpm。rpm 的 使 命 就 是 简化 依赖 链接 的 过 程 ， 避 免 什 么 事 都 要 手 
动 完 成 。 

ReactNative 包 管理 器 的 使 命 在 于 简化 React Native 的 上 日常 开发 过 程 。 它 受 CocoaPods 

局 发， 作为 你 进行 react-native 链 接 的 最 佳 伙伴 ， 引 导 你 解决 原生 层 中 不 熟悉 的 部 分 。 它 

致力 于 在 不 需要 任何 额外 配置 的 情况 下 ， 就 能 用 几乎 所 有 的 第 三 方 包 进行 开发 。 

rnpm 作 为 全 局 的 Node 模 块 ， 可 全 局 运行 npm install 来 安装 它 。 

npm install rnpm -9 

。 安装 依赖 

如 果 你 想 要 安装 某 个 依赖 并 进行 链接 ， 在 项 目 根 目录 下 运行 以 下 命令 。 


rnpm install <name> 























。 链接 依赖 
如 果 你 已 经 安装 ( 未 进行 链接 ) 某 些 依赖 ， 在 项 目 根 目录 下 运行 以 下 命令 。 
rnpm Link 
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当然 ， 如 果 只 有 一 个 依赖 需要 链接 ， 在 上 述 命令 后 跟 上 依赖 包 名 即 可 。 


rnpm Link <name> 





2.7 总 结 


本 章 深入 研究 了 React Native 的 组 件 和 模块 ， 讲 解 了 它们 的 工作 原理 ， 如 何 编写 ， 以 及 如 何 
将 其 整合 到 React Native 项 目 中 。 你 要 掌握 的 便 是 原生 组 件 以 及 模块 的 开发 ， 模 块 其 实 仅仅 是 一 
个 类 ， 作 为 你 所 要 用 到 的 原生 功能 或 UI 组 件 的 代理 层 。 原 生 模 块 就 是 JavaScript 层 可 以 调用 的 一 
些 方法 的 集合 。React Native 做 了 大 量 的 工作 ， 将 JavaScript 层 与 原生 层 连 接 起 来 。 原 生 的 组 件 管 
理 需 也 仅仅 是 一 些 方法 的 集合 ， 当 设置 或 者 改变 JavaScript 组 件 属性 的 时 候 ， 可 以 调用 这 些 方法 。 
而 上 述 两 者 就 是 原生 层 的 入 口 。React Native 已 经 为 你 解决 了 所 有 的 难题 。 
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示例 应 用 : Myagi 











Myagi 成 立 于 2013 年 ， 为 零售 业 销售 人 员 提 供 在 线 培训 平台 。Myagi 开 发 的 目的 在 于 让 零售 
业 员 工 可 以 更 便捷 地 获取 工作 所 需 的 信息 。 没 有 Myagi 的 情况 下 ， 和 零售 商 几 乎 无 法 为 员工 提供 连 
续 且 可 跟踪 的 培训 体验 。 而 有 了 Myagi 的 帮助 ， 他 们 就 能 为 员工 提供 视频 形式 的 培训 资料 ， 员 工 
通过 这 些 资料 可 以 了 解 到 工作 以 及 所 售 产品 的 重要 方面 。 这 些 培 训 单元 能 确保 为 员工 连续 提供 信 
息 ， 同 时 管理 者 可 以 更 方便 地 跟踪 哪个 员工 接受 了 哪 种 练习 。 

提供 这 样 一 个 平台 的 重点 在 于 ,允许 用 户 在 移动 端 访问 培训 资料 。 尽 管 已 经 有 了 专 为 移动 端 
优化 的 Web 应 用 ， 但 显而易见 的 是 ， 原 生 应 用 能 够 极 大 地 提升 移动 端的 用 户 体验 。 移 动 Web 应 用 
无 法 提供 原生 应 用 那样 的 性 能 以 及 触摸 交互 体验 。 因 此 ， 我 们 决定 用 React Native 开 发 移动 应 用 。 
你 可 以 前 往 网 页 https://itunes.apple.com/us/app/myagi/id1093253823 下 载 应 用 ， 看 看 我 们 的 最 终 成 
果 。 




















3.1 为 什么 选择 React Native 


Myagi 的 团队 相对 较 小 ， 因 此 在 开发 原生 应 用 的 同时 维护 Web 应 用 ( 全球 每 天 都 有 许多 用 户 
在 使 用 ) 将 十 分 困难 。 然 而 ,我 们 的 Web 应 用 是 用 React 开 发 的 ， 所 以 我 们 希望 使 用 React Native 
可 以 复 用 Web 应 用 的 部 分 代码 以 及 开发 技巧 。 


尽管 React Native 似 乎 是 很 好 的 选择 ,我 们 还 是 考虑 了 两 个 替代 方案 : 完全 用 Swift 开发 iOS 应 
用 ， 或 者 用 Phonegap 这 样 的 Web 包 装 需 来 开发 。 

第 一 个 “完全 原生 ”的 方案 很 吸引 人 ， 因 为 它 让 我 们 确信 : 如 果 采 用 Swift， 那么 可 以 开发 出 
界面 和 功能 与 市 场 上 的 顶尖 iOS 应 用 一 样 棒 的 高 质量 应 用 。 然 而 , 这 需要 学 习 一 套 全 新 的 技术 集 ， 
并 且 无 法 复 用 已 有 的 前 端 代 码 。 因 此 我 们 放弃 了 这 个 方案 。 

第 二 个 替代 方案 便 是 用 Phonegap 打 包 Web 应 用 ， 让 它 可 以 从 应 用 商店 中 下 载 。 用 Phonegap 
( http://phonegap.com/ ) “打包 ” 一 个 网 站 十 分 简单 ， 这 样 就 能 在 iOS 和 Android 的 应 用 商店 中 下 载 
到 应 用 形式 的 网 站 。 这 个 方案 的 优点 在 于 ,我 们 基本 上 只 需要 把 已 有 的 Web 应 用 打包 好 ， 就 几乎 
可 以 马上 为 用 户 提供 一 个 应 用 。 然 而 我 们 否决 了 这 个 方案 , 因为 Phonegap 应 用 的 用 户 体 验 不 如 原 
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因此 ， 我 们 选择 了 React Native。 它 允许 我 们 提供 完美 的 用 户 体 验 ， 并且 能 够 复 用 现 有 的 代 
码 和 技巧 。 这 种 在 原生 应 用 和 Web 应 用 间 共 享 现 有 代码 的 能 力 , 极 大 地 减少 了 花 在 开发 原生 应 用 
上 的 时 间 。 后 续 章 节 中 会 详细 描述 实现 过 程 。 








开始 前 的 准备 
本 章 将 通 篇 介绍 开发 ReactNative 应 用 的 过 程 中 如 何 解 决 一 些 关键 的 技术 难题 ， 我 们 只 有 iOS 


平台 的 应 用 , 因此 我 的 一 些 建议 只 针对 iOS 平 台 , 不 过 大 部 分 建议 都 适用 于 两 个 平台 。 总 的 来 说 ， 
我 希望 接 下 来 要 介绍 的 解决 方案 能 够 帮助 其 他 人 更 容易 解决 遇 到 的 类 似 问 题 。 





3.2 ”状态 


状态 管理 是 任何 前 端 应 用 中 最 困难 的 部 分 之 一 〈 不 论 React Native 应 用 还 是 其 他 应 用 )。 可 以 
肯定 ， 你 几乎 需要 不 断 地 通过 API 来 获取 和 更 新 应 用 的 数据 ， 除 非 你 的 应 用 通过 本 地 存储 来 持久 
化 所 有 状态 。 这 会 带 来 下 面 的 一 系列 挑战 。 


口 确保 组 件 有 权限 访问 它们 所 需 的 数据 一 不 同 组件 对 数据 的 需求 有 很 大 的 不 同 。 比 如 ， 某 
个 组 件 可 能 仅仅 需要 获取 当前 用 户 的 email 属 性 , 而 另 一 个 组 件 可 能 既 需 要 email 属 性 ,又 
需要 用 户 的 company_name 属 性 。 确保 两 者 都 能 得 到 它们 所 需 的 数据 ,又 不 用 重复 调用 API， 
这 将 是 一 个 挑战 。 

口 分 页 (pagination ) 一 数据 量 很 大 的 情况 下 ， 不 可 能 一 次 就 把 数据 实体 的 全 部 集合 都 取 回 

来 ， 相 反 ， 很 有 必要 对 数据 实体 进行 分 页 。 

口 缓存 一 启用 缓存 可 以 极 大 地 提升 用 户 体 验 。 以 Myagi 为 例 ， 当 用 户 第 一 次 打开 应 用 时 ， 获 
取 当 前 用 户 的 培训 计划 。 当 用 户 下 一 次 访问 首页 时 ， 没 有 理由 让 他 们 等 待 重新 获取 所 有 
培训 计划 。 我 们 的 做 法 是 对 数据 进行 缓存 ， 并 重新 展示 出 来 。 这 也 是 一 个 很 有 挑战 性 的 
任务 ， 因 为 需要 保证 当 服务 端的 培训 计划 的 某 个 属性 发 生 改 变 时 ， 该 变化 要 展现 于 用 户 
眼前 ( 即 让 缓存 失效 )。 

庆幸 的 是 ， 着 手 开发 React Native 应 用 之 前 ， 在 基于 React 开 发 的 Web 应 用 中 ， 我 们 已 经 有 了 

大 型 的 代码 库 ， 使 得 状态 的 获取 和 更 新 变 得 非常 简单 。 这 个 状态 管理 代码 方案 使 用 了 Marty.js 

( http://martyjs.org/ ) 以 及 Flux 架 构 (http://facebook.github.io/flux/docs/overview.html#content )， 并 

且 我 们 在 此 基础 上 开发 了 一 整套 代码 方案 ， 使 得 应 用 获取 和 更 新 状态 变 得 很 方便 。Myagi 应 用 的 

这 个 状态 管理 库 是 我 们 为 自己 的 API 量 身 定 做 的 ,另外 所 用 到 的 Marty.js 如 今 已 不 再 维护 ， 因 此 没 

有 把 它 开 源 。 不 过 我 会 详细 介绍 它 的 工作 原理 ， 因 为 我 相信 其 中 的 大 部 分 工作 也 可 以 适用 于 其 他 

情况 。 
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3.2.1 Flux 


在 进一步 详细 介绍 应 用 之 前 ， 很 有 必要 先 来 了 解 一 下 Flux。Flux 是 一 种 应 用 架构 ， 可 以 简化 

前 端 应 用 的 状态 管理 过 程 。 这 里 做 一 个 简单 的 解释 ，Flux 包 含 以 下 几 个 关键 概念 。 

口 store 一 用 来 保存 数据 。 组 件 可 以 通过 它们 获取 数据 。 

D action 生 成 器 一 用 来 更 新 数据 以 及 生成 新 的 数据 。 

口 分 发 需 (dispatcher ) 一 Flux 架 构 的 应 用 中 通常 只 有 一 个 分 发 器 。 一 般 来 说 ， 分 发 需 作 为 
action 生 成 器 和 store 的 通信 中 介 。store 把 回调 函数 注册 到 分 发 器 上 , 当 action 生 成 器 发 送 了 
一 条 匹配 某 个 回调 函数 的 信息 时 ， 就 会 触发 对 应 的 回调 函数 。 

这 只 是 对 Flux 的 简要 概述 ， 因 此 如 果 想 要 深入 地 理解 这 个 架构 ， 就 得 仔细 阅读 它 的 文档 。 重 

要 的 是 , Flux 仅 仅 是 一 种 架构 , 所 以 每 个 应 用 都 需要 自己 来 具体 实现 它 。Martyjs 库 如 今 已 不 再 维 

护 ， 它 原本 的 设计 目的 在 于 实现 Flux 架 构 。 尽 管 我 们 目前 在 Myagi 应 用 中 使 用 了 Martyjs， 如 果 可 

以 重 选 一 次 ， 我 们 很 可 能 会 用 更 流行 的 Redux 来 取代 它 。 
















































































3.2.2 Myagi API 


在 讲解 如 何 使 用 Flux 架 构 以 及 Marty 库 管理 应 用 状态 之 前 ， 先 来 了 解 一 下 Myagi API 的 特性 。 
Myagi 的 API 是 RESTful 风 格 的 HTTP API， 并 具有 以 下 几 个 重要 特性 。 


口 向 数据 源 发 起 请 求 时 ,可 以 传递 fteLds 参 数 ,以便 有 选择 地 获取 字段 并 展开 相关 字段 。 比 
如 ， 获 取 卫 为 123 的 培训 计划 以 及 它 所 有 子 模块 的 名 称 ， 可 以 发 起 如 下 请 求 : /apt/v1/ 
training_plans/123/?fields=name,modules.name。 通 过 指定 字段 hame 和 modules. name， 
API 就 知道 应 该 返回 以 下 格式 的 响应 。 

{ 


name: 'Some plan', 
modules: [ 











name: 'First module' 
]， 
江 


name: "Second module' 
} 
] 
} 
该 字段 的 展开 方式 基本 上 可 以 有 无 限 的 可 能 ， 这 就 使 得 API 变 得 很 灵活 ， 任 何 组 件 都 可 以 指 
定 并 接收 自己 需要 的 数据 格式 。 
口 任何 列表 路 径 (list endpoint ) 都 可 以 通过 传递 指定 的 查询 参数 进行 第 选 。 比 如 我 们 希望 
获取 名 称 里 包含 sales 的 培训 计划 ， 可 以 发 起 如 下 请 求 : /api/vi1/training_plans/?name__ 


contains=sales。 
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口 任何 列表 路 径 都 可 以 很 方便 地 用 Limit 和 offset 人 参数 进行 分 页 。 因 此 假如 想 要 返回 第 5 个 之 
后 的 10 个 培训 计划 ， 可 以 发 起 如 下 请 求 : /api/v1/training_plans/?offset=5&limit=10。 
口 任何 列表 路 径 的 查询 结果 都 可 以 通过 ordering 字 段 进 行 排序 。 比 如 按 名 称 字 段 的 字母 表 顺 
序 对 培训 计划 进行 排序 : /api/v1/training_plans/?ordering=name。 






































3.2.3 ”Marty.js 与 状态 模块 的 生成 


Marty 提 供 了 基础 的 类 和 方法 来 创建 Flux 的 关键 组 件 。 举 例 来 说 ， 它 提供 了 store 和 
ActionCreator 类 ， 可 以 用 它们 创建 特定 数据 源 的 store 和 action 生 成 器 。 然 而 ， 为 了 简化 数据 获取 
和 更 新 的 过 程 ， 我 们 有 必要 为 自己 的 API 量 身 打 造 一 个 状态 管理 库 。 这 样 做 的 目的 在 于 让 所 有 排 
序 、 筛 选 和 缓存 的 逻辑 完全 由 状态 模块 自动 处 理 ， 而 组 件 本 身 不 用 对 这 些 进行 判断 。 

我 们 还 希望 尽 可 能 地 简化 代码 模板 ， 以 便 减 少 整个 代码 库 的 元 余 。 大 多 数 Flux 架 构 的 应 用 到 
后 来 都 会 包含 大 量 的 代码 模板 , 因为 通常 情况 下 每 种 数据 实体 类 型 ( 如 用 户 、 人 公司、 培训 计划 等 ) 
都 要 用 到 许多 不 同 的 函数 和 常量 ， 以 便 可 以 通过 store 和 action 生 成 器 对 它们 进行 访问 和 更 新 。 尽 
管 Martyjs ( 以 及 其 他 基于 Flux 的 库 ) 已 经 简化 了 代码 模板 , 但 我 们 希望 能 够 进一步 简化 ， 于 是 开 
发 了 stateModuteGenerator 方 法 ， 它 可 以 根据 给 出 的 数据 实体 名 称 和 API 路 径 ， 生 成 对 应 的 常量 、 
store 以 及 action 生 成 器 。 比 如 ， 用 它 创 建 usersState 模 块 的 方式 如 下 。 


import stateModuleFactory from 'state/common/factory/http'; 

































































Let UsersState = stateModuleFactory({ 
entity: 'user', 
endpoint: 'api/vi/users' 


}); 
export UsersState; 


UsersState 对 象 拥 有 Store 和 ActionCreators 属 性 ， 通 过 前 者 可 以 访问 用 户 数据 ， 通 过 后 者 可 
以 更 新 用 户 数据 。 


接 下 来 这 个 状态 模块 就 可 以 被 我 们 的 “容器 ”组 件 所 使 用 了 ， 容 器 组 件 用 于 从 store 中 获取 数 
据 并 立即 传递 给 单一 的 子 组 件 。 Flux 架 构 的 库 中 普遍 存在 容器 组 件 的 概念 : Redux、Relay、Marty.js 
等 库 都 有 这 样 的 概念 。 这些 容 器 用 于 通过 store 请 求 数据 ， 并 在 数据 返回 或 者 更 新 时 把 它 传递 给 子 
组 件 。 在 我 们 的 代码 库 中 ， 负 责 泻 染 用 户 列 表 的 子 组 件 userList， 它 的 容器 组 件 如 下 。 


















































// 泻 染 用 户 列表 的 组 件 
const UserList = ({ users }) => { 
return ( 
<View> 
{ users.map( user => <Text key={user.get('id')}>{user.get('first_name')}</Text>) 


<View> 
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) 
}; 


// 容器 组 件 
const UserListContainer = Marty.createContainer(UserList, { 


listenTo: [ 
UsersState. Store 


]， 


fetch: { 
users: function() { 
return UsersState.Store.getItems({ 
// 只 获取 每 个 用 户 的 first_name 属 性 
fields: [ 
'first_name' 
]; 
// 只 获取 'AcmeCorp' 公 司 的 用 户 
Company__Company_name= 'AcmeCorp 
]); 
} 
} 


}); 


如 代码 所 示 ，UserListcomponent 组 件 利用 之 前 生成 的 Usersstate 模 块 从 API 获 取 用 户 数据 。 
重要 的 是 ， 容 器 组 件 仅 仅 声 明了 它 需 要 什么 数据 ( 所 有 'AcmeCorp' 公 司 的 用 户 ， 并 只 带 有 | 
'first_name' 属 性 )，store 负 责 决定 从 本 地 缓存 还 是 从 远 端 获取 数据 , 亦 或 两 方面 的 数据 都 取 。 这 
样 的 处 理 方式 非常 有 用 ， 因 为 所 有 关于 数据 缓存 和 分 页 的 复杂 逻辑 ,都 交 给 store 来 处 理 了 ， 容 器 
要 做 的 只 是 请 求 特定 的 数据 集 并 等 待 接收 。 


现在 ,你 可 能 对 UsersState.Store 模 块 的 内 部 原理 感到 好 奇 。 实 际 上 这 并 不 重要 ， 因 为 它 和 
我 们 的 API 关 联 得 太 紧 密 了 ， 为 了 复制 它 的 实现 而 进行 一 番 详 细 描述 没有 什么 意义 。 我 反而 想 演 
示 一 下 自 定 义 状 态 管理 函数 以 及 辅助 工具 的 开发 ， 以 有 利于 你 们 在 已 有 的 Flux 库 (如 Redux ) 之 
上 进行 React Native 开 发 。 这 么 做 可 以 让 你 在 需要 管理 状态 时 维护 整个 代码 库 的 一 致 与 简洁 。 

































































3.3 ”路 由 


原生 应 用 的 路 由 与 Web 应 用 的 路 由 有 一 些 不 同 。 最 主要 的 区 别 在 于 原生 应 用 有 视图 “ 栈 ” 这 
一 很 明显 的 特点 。 栈 (stack ) 就 是 一 系列 的 页 面 逐 个 县 放 在 一 起 。 以 此 处 的 应 用 为 例 , 用 户 点 击 
了 应 用 中 的 一 个 培训 计划 , 一 个 显示 该 计划 详情 的 视图 就 会 放置 在 当前 视图 的 上 方 。 当 用 户 点 击 
了 左上 方 的 返回 按钮 ， 这 个 新 的 视图 就 会 被 “弹出 ” 栈 , 返回 到 培训 计划 列表 。 管 理 这 些 栈 ， 以 
及 诸如 使 用 标签 页 等 不 同 的 路 由 方法 ， 将 是 一 大 挑战 。 我 们 使 用 了 React Native Router Flux 
( https://github.com/aksonov/react-native-router-flux ) 这 个 库 ， 后 续 的 章节 中 会 介绍 它 
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深度 链接 
深度 链接 允许 其 他 应 用 、 网 络 链接 或 者 通知 消息 触发 启动 你 的 应 用 , 并 过 渡 到 某 个 特定 的 页 
面 。 这 种 方式 很 像 打 开 某 个 网 站 的 URL 后 自动 跳 到 另 一 个 网 站 的 URL。iOS 和 Android 应 用 都 支持 
深度 链接 。 以 iOS 应 用 为 例 ， 你 可 以 为 自己 的 应 用 注册 一 个 特定 的 URL Scheme， 其 他 应 用 就 能 通 
过 它 来 启动 你 的 应 用 。 

以 此 处 的 应 用 为 例 ， 我 们 注册 了 名 为 myagi 的 URL scheme。 其 他 应 用 甚至 网 站 都 可 以 用 这 个 
scheme ， 通 过 打开 myagi://register 这 样 的 URL 来 触发 启动 我 们 的 应 用 。 访 问 这 个 URL 后 ， 应 用 就 
会 启动 ( 如果 用 户 安 装 了 它 ) 并 得 到 所 传 来 的 链接 。 

为 你 的 应 用 设置 这 样 的 URL scheme 其 实 很 简单 。 如 果 想 这 么 做 ， 只 需要 选择 应 用 的 Info.plist 
文件 。 

















vy 加 Myagi 
可 Myagi 
Pp SupportingFiles 
h AppDelegate.h 
m AppDelegate.m 
m main.m 
environment.plist 


m TestRunnerManager.m 


然后 在 URL types 下 的 URL Schemes 设 置 中 新 增 一 项 内 容 。 





WURL types $ Array (1 item) 
¥ ltem 0 (Editor) Dictionary (3 items) 
Document Role < String Editor 
URL identifier ^ String com.myagi.app 
WURL Schemes < Array (1 item) 
ltem 0 String myagi 








上 述 示例 中 把 scheme 设 置 成 了 myagi， 你 也 可 以 把 它 设 置 成 任意 值 。 这 里 提供 一 条 建议 : 尽 
量 为 你 的 应 用 选择 独一无二 的 URL scheme， 以 免 它 和 用 户 设备 上 其 他 应 用 的 te 冲突 。 

一 旦 设置 好 URL scheme 用 来 启动 应 用 ， 就 必须 对 传 来 的 链接 做 某 种 处 理 ， 以 便 用 户 能 被 重 
定向 到 正确 的 页 面 。 以 该 应 用 为 例 ，React Native Router Flux 库 没有 内 置 每 个 应 用 内 页 面 的 唯 
路 径 这 种 概念 。 因 此 ， 需 要 提供 自己 的 解决 方案 来 处 理 这 些 深 度 链 接 。 这 里 的 做 法 比较 直接 : 当 
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应 用 打开 后 ， 用 React Native 提 供 的 Linking 模 块 检查 一 下 是 否 由 深度 链接 所 打开 。 这 个 过 程 由 
Launch 组 件 完成 ,无 论 应 用 何 时 启动 ， 加 载 的 第 一 个 页 面 都 是 该 组 件 。 如 果 取 得 了 链接 ， 就 把 它 
传 给 handteIncomtngLink 函 数 ， 代 码 如 下 。 


class Launch extends React.Component { 








Linking.getInitialURL().then(url => { 
Let handled = faLse; 
if (url) { 
// 该 处 理 函 数 成 功 处 理 了 链接 之 后 将 返回 true 
handled = handleIncomingLink(url); 


} 
if (!handled) { 
// 如 果 处 理 函 数 执行 失败 或 者 URL 不 存在 的 情况 下 ， 过 渡 到 某 个 默认 的 路 由 


} 
3 


handleIncomingLink 函 数 与 其 他 特定 路 由 的 处 理 函 数 都 是 一 起 在 Linking 模 块 中 进行 定义 的 ， 
而 且 非 常 简单 。 以 下 是 该 模块 的 主要 内 容 。 


// 处 理 函 数 如 果 成 功 处 理 了 链接 ， 那 就 返回 true， 否 则 返回 faLse 
const APP_LINK_HANDLERS = { 
'register': () => { 
goToPath( 'unauthedUserStart/register'); 
return true; 
} 
}; 





export function handleIncomingLink(url) { 
let alUrl = new AppLinkURLCUrL ) ; 
Let route = alUrl.url.hostname + (alUrl.url.pathname || ''); 
Let handler = APP_LINK_HANDLERS[route]; 
if (handler) return handler(); 
return false; 


} 


这 段 代码 中 定义 了 特殊 的 APP_LINK_HANDLERS 对 和 象 。 如 果 它 的 方法 与 特定 的 深度 链接 匹配 , 就 
会 被 调用 。 比 如 ， 我 们 已 经 为 register 路 由 设置 了 一 个 方法 ， 因 此 如 果 应 用 通过 myagi:/register 
这 一 URL 来 打开 ， 接 下 来 就 会 用 goToPath 函 数 把 用 户 带 到 注册 页 面 。goToPath 函 数 是 问题 的 最 后 
一 环 ， 它 在 路 由 工具 库 中 进行 定义 ， 参 见 以 下 代码 。 


import _ from 'lodash'; 
import {Actions as RouterActions} from 'react-native-router-flux'; 











export function goToPath(path) { 
if (!path) return; 
let parts = path.split('/'); 
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RouterActions[_.head(parts)](); 
_.defer(()=>{ 
goToPath(_.tail(parts).join('/')); 
}); 

} 

这 是 一 个 非常 简单 的 函数 , 并 且 它 把 path 参 数 的 各 部 分 高 效 地 处 理 成 独立 的 路 由 行为 ， 然 后 
逐个 执行 。 通 过 这 种 方式 ， 提 供 我 们 定义 的 RouterActions 的 正确 序列 来 触发 前 往 对 应 的 路 由 ， 
并 确保 为 链接 设置 好 处 理 函 数 ， 就 可 以 根据 深度 链接 轻松 过 渡 到 应 用 的 任何 部 分 。 

这 些 简单 的 设置 就 绪 后 ， 就 能 为 应 用 定义 任何 想 要 的 自 定义 链接 。 尽 管 目前 只 有 一 个 
myagi:/register 链 接 的 处 理 函 数 ， 不 过 添加 任何 想 要 的 链接 也 很 简单 ， 只 要 在 APP_LINK_HANDLERS 
对 象 中 定义 恰当 的 处 理 函 数 即 可 。 

































































3.4 ”身份 验证 


这 里 选用 JSON 网 络 令 牌 (JWT ) 来 验证 应 用 中 的 请 求 。JWT 令 牌 本 质 上 是 一 串 很 长 且 唯 一 
的 字符 串 ， 它 将 伴随 每 条 请 求 一 起 发 送 ， 以 便 验 证 它 并 确保 它 属 于 特定 的 用 户 〈 实 际 上 JWT 令 牌 
内 硬 编码 了 准确 的 用 户 信息 )。 每 个 JWT 令 牌 用 一 个 密 钥 进行 签名 ， 该 密 钥 只 保存 在 你 的 服务 端 
(并且 不 能 与 任何 人 共享 ) 因此 服务 端 实际 上 不 需要 记录 它 创建 的 所 有 JWT 令 牌 , 仅 需 简单 地 检 
查 所 收 到 的 每 个 JWT 令 牌 是 否 用 正确 的 密 钥 签 名 即 可 。 如 果 令 牌 正确 ,服务 端 就 可 以 信任 它 携带 
的 信息 并 对 请 求 进行 验证 。 

在 Myagi 应 用 中 ， 用 户 输 入 登录 信息 后 ， 一 条 请 求 就 会 发 送 给 后 端 。 如 果 登 录 信 息 正 确 ， 后 
端 就 会 返回 一 个 JWT 令 牌 , 接 下 来 就 可 以 用 它 来 为 用 户 获 取 数 据 。 因 此 客户 端 需要 保存 这 个 JWT 
令 牌 ， 以 便 每 条 请 求 都 能 使 用 它 。 这 就 是 Authstore 所 负责 的 工作 。 当 取 回 JWT 令 牌 后 ， 它 会 马 
上 被 传 给 Authstore。 这 样 ， 每 当 要 进行 fetch 请 求 时 ， 就 会 从 Authstore 中 取出 JWT 令 牌 并 和 请 求 
一 起 发 送 。 

这 个 过 程 中 唯一 的 复杂 之 处 在 于 ，JWT 令 牌 需要 持久 化 保留 ， 甚 至 应 用 进程 被 杀 掉 〈 比如 设 
备 重 启 时 ) 也 不 能 丢失 。 本 例 为 此 使 用 了 React Native 提 供 的 AsyncStorage 模 块 。auth 状 态 模块 的 
定义 见 以 下 代码 。 

import React from 'react-native'; 

const { 

AsyncStorage 
} = React; 
import Marty from 'marty-native'; 


import _ from 'lodash'; 
import Im from 'immutable'; 







































































import app from 'core/application'; 


const TOKEN_KEY = 'authToken'; 
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const Constants = Marty.createConstants([ 
"SET_AUTH_TOKEN 
]); 


// 这 些 ActionCreators 类 可 以 用 来 设置 或 清除 当前 的 authToken 
class ActionCreators extends Marty.ActionCreators { 
setAuthToken(str) { 
this.dispatch(Constants.SET_AUTH_TOKEN, str); 


} 


clearAuthToken() { 
this.setAuthToken(''); 
} 
} 


// 该 store 用 来 记录 身份 验证 令 牌 


class Store extends Marty.Store { 


constructor(opts) { 
super(opts); 
// 监听 action SET_AUTH_TOKEN， 并 进行 相应 的 处 理 
this.handlers = { 
onSetToken: Constants.SET_AUTH_TOKEN 
}; 
this.state = { 
authToken: null, 
tokenHasBeenFetchedFromCache: false 
}; 
// 尝试 从 当前 存储 中 为 authToken 获 取 初 始 值 
this.getTokenFromStorage(); 
} 





getTokenFromStorage() { 
// 用 AsyncStorage 模 块 党 试 获取 上 一 次 使 用 应 用 时 保存 的 令 牌 
AsyncStorage.getIitem(TOKEN_KEY).then( (token)=>{ 
// token 不 存在 的 情况 下 值 为 nuLL， 因 此 不 管 是 否 取 到 值 ， 都 对 该 store 的 内 部 状态 进行 设置 
this.setState({ 
authToken: token, 
tokenHasBeenFetchedFromCache: true 
]); 
}); 
} 


onSetToken(token) { 
// 在 当前 内 存 中 保存 令 牌 的 引用 ， 以 便 每 条 请 求 部 可 以 使 用 它 
this.state.authToken = token; 
// 持久 化 保存 令 牌 以 便 应 用 重启 后 可 以 再 次 使 用 它 
AsyncStorage.setItem(TOKEN_KEY, token); 
this.hasChanged(); 

} 


getToken() { 
return this.state.authToken; 


} 
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只 需 
回调 
回 的 


tokenHasBeenFetchedFromCache() { 
// 该 方法 用 来 检查 是 否 还 在 等 待 令 牌 从 持久 化 存储 中 取 回 
return this.state.tokenHasBeenFetchedFromCache; 
} 
} 


export default { 

ActionCreators: app.AuthActionCreators, 

Store: app.AuthStore, 
}; 
该 store 的 getToken 方 法 在 每 次 向 服务 端 发 起 请 求 时 被 调用 ， 用 于 发 送 正确 的 JWT 令 牌 。 我 们 
确保 用 action 生 成 器 setAuthToken 在 某 个 时 刻 设置 好 令 牌 。 这 个 过 程 发 生 在 登录 请 求 成 功 后 的 
函数 中 。 以 下 是 登录 页 组 件 的 部 分 代码 , 它 展示 了 发 起 用 户 登 录 请 求 并 在 登录 成 功 后 保存 返 
令 牌 。 











// 该 action 生 成 器 会 向 'token_auth' 路 径 发 起 请 求 

PublicUsersState.ActionCreators.doListAction( 
'token_auth', 
// data 参 数 包 含 了 用 户 输 入 的 邮件 地 址 和 密码 
data 

) .then((res)=>{ 

// 此 处 我 们 使 用 了 action 生 成 器 setAuthToken 来 保存 服务 端 返 回 的 令 牌 
// 该 令 牌 可 以 被 后 续 的 全 部 请 求 所 用 
AuthState.ActionCreators.setAuthToken(res.body.token); 


}) .catch( err => { 


}); 


一 旦 这 条 保存 身份 验证 令 牌 的 请 求 完 成 后 , 后 续 的 全 部 请 求 都 可 以 使 用 这 个 令 牌 。 然 而 ,如 
































果 用 户 彻底 关闭 应 用 再 重启 ， 我 们 不 希望 他 们 需要 再 次 登录 。 这 正 是 用 AsyncStorage 模 块 把 
authToken 保 存在 持久 化 存储 中 的 原因 。 当 启动 应 用 时 ， 如 果 从 Asynstorage 中 取 到 了 authToken， 

















要 等 














[ 接 跳 过 登录 页 。 不 过 这 里 会 有 些 复杂 ， 因 为 很 显然 Asyncstorage 是 异步 的 ， 这 意味 着 一 定 
待 它 检查 完 令 牌 是 否 已 经 存在 ， 青 选择 要 把 用 户 带 到 哪 ( 登录 或 培训 页 面 )。 


这 个 问题 的 解决 方案 就 是 使 用 之 前 提 到 过 的 专门 的 Launch 组 件 , 它 在 应 用 启动 时 被 加 载 为 第 















































一 个 页 面 。Launch 组 件 通 过 一 个 容器 高 效 地 封装 起 来 ， 容 器 负责 监听 之 前 所 定义 的 
AuthSstate.Store 的 变化 。Launch 组 件 本 身 很 简单 ， 泻 染 一 个 空 的 视图 并 通过 执行 环境 传人 tsAuth 


值 。 
已 有 











当 Authstate.Store 还 在 本 地 存储 中 查找 已 有 的 令 牌 时 ，isAuth 的 初始 值 为 nuotL。 如 果 找 到 了 
的 令 牌 ,tsAuth 将 被 设置 为 true, 否则 设 为 fatse。 一 旦 显 式 地 设置 了 true 或 者 faLse, Launch 











组 件 就 能 过 渡 到 正确 的 页 面 。 相关 的 逻辑 写 在 Launch 组 件 的 componentWillUpdate 方 法 中 ,如 下 


所 示 


o 
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componentWillUpdate(nextProps, nextState, nextContext) { 


// 一 旦 isAuth 被 设置 了 null 以 外 的 值 ， 就 能 决定 先 带 领 用 户 前 往 哪 个 路 由 
if (nextContext.isAuth !== null) { 


// 如 果 还 未 设置 CurrentUser， 那 么 存在 身份 验证 令 牌 (也 可 以 在 此 处 检查 LsAuth) 
if (!nextContext.currentUser) { 
// 带 用 户 前 往 登 录 页 
RouterActions.unauthedUserStart(); 
} else if (nextContext.currentUser) { 
// 带 用 户 前 往 他 们 的 培训 主页 
RouterActions .authedUserStart() ; 
} 
} 


sn 


这 个 方法 的 好 处 在 于 不 需要 使 用 任何 的 回调 函数 或 者 promise。Launch 组 件 内 的 全 部 代码 都 是 
同步 的 ， 只 需要 监听 Authstate.Store 的 变化 并 确保 能 调用 相应 的 componentWtLLUpdate 方 法 即 可 。 

















3.5 ”iOS 平台 的 环境 配置 


通常 情况 下 ,需要 根据 不 同 的 构建 过 程 来 快速 修改 应 用 的 配置 变量 。 比 如 你 想 要 先 构 建 与 
staging 环 境 服务 器 通信 的 应 用 ， 再 构建 与 生产 环境 服务 器 通信 的 应 用 。 遗 憾 的 是 ， 使 用 iOS 平 台 
的 React Native 时 ， 没 有 内 置 的 途径 能 够 方便 地 切换 配置 。 

为 了 解决 Myagi 遇 到 的 这 个 问题 , 我 们 结合 使 用 了 几 种 技术 : iOS 构 建 配置 与 ssheme 文 件 、 自 
定义 构建 脚本 、environment.plist 文 件 以 及 react-native-env 库 。 为 了 展示 如 何 使 用 这 些 技术 ， 接 
下 来 将 以 切换 API 服 务 端 URL 的 过 程 为 例 ， 讲 解 如 何 把 服务 端 从 开发 环境 切换 到 staging 环 境 ， 再 
到 生产 环境 。 

































































3.5.1 ”plist 文件 与 react-native-env 模块 


plist 〈 属性 列表 ) 文件 通常 用 来 保存 应 用 的 配置 信息 。 实 际 上 ， 所 有 全 新 的 iOS 工 程 都 带 有 
默认 的 Info.plist 文 件 ， 里 面包 含 了 应 用 相关 的 详细 配置 ( 例如 Bundle Verison )。 这 些 文件 可 以 在 
应 用 内 很 方便 地 通过 Objective-C (或 Swift ) 来 访问 。 举 例 来 说 ， 假 如 想 要 从 Info.plist 文 件 中 获取 
Bundle Version 值 ， 可 以 运行 以 下 的 Objective-C 代 码 。 


NSDictionary *plistData = [NSDictionary dictionaryWithContentsOfFile:[[NSBundle 
mainBundle] pathForResource:@"Info" ofType:@"plist"]]; 
























































/* 打 印 保存 在 Info.plist 文 件 中 的 'Bundle Verison' 值 */ 
NSLog([env objectForKey: @'Bundle Version']); 


plist 文 件 的 值 也 可 以 在 React Native 使 用 的 JavaScript 执 行 环境 中 访问 。 我 们 可 以 使 用 
react-native-env 模 块 来 实现 。react-native-env 模 块 允许 创建 名 为 environment.plist 的 文件 ， 该 
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文件 中 的 值 可 以 被 React Native 的 JavaScript 执 行 环 境 访 问 。 举 例 来 说 ， 假 如 environment.plist 文 件 
中 有 一 个 APISserverURL 属 性 ， 可 以 用 以 下 代码 在 控制 台 输出 该 值 。 


import env from 'react-native-env'; 








env.get('APIServerURL ' ) .then( val => console.log(val) ); 


为 plist 文 件 里 的 值 可 以 被 JavaScript 执 行 环 境 和 Objective-C/Swift 代 码 访问 到 ， 所 以 可 以 合 
理 地 用 它们 来 放置 ( 至少 一 部 分 ) 配置 信息 。 我 们 在 Myagi 中 的 做 法 正 是 如 此 ， 尤 其 是 针对 动态 
变量 而 言 ， 我 们 想 要 根据 开发 应 用 的 计算 机 来 设置 它们 ( 比如 想 要 在 开发 过 程 中 让 APIServerURL 
包含 当前 计算 机 的 IP 地 址 )。 不 过 ， 在 构建 过 程 之 间 修 改 environment.plist 文 件 里 的 变量 ,需要 用 
到 scheme 文 件 、 构 建 配 置 以 及 自 定义 构建 脚本 。 
































3.5.2” ”iOS scheme 文件 与 构建 配置 


scheme 构 建文 件 仅 仅 是 一 个 “已 保存 ”的 设置 集合 ， 用 于 在 Xcode 中 构建 和 运行 应 用 。 你 可 
以 在 Xcode 窗口 左上 方 的 下 拉 菜 单 中 快速 改变 当前 的 scheme。 





m Myagi 》 Pa Generic iOS Device 


如 上 图 所 示 ， 可 以 点 击 左 侧 带 有 Myagi 标 签 图 片 的 按钮 在 不 同 的 scheme 文 件 之 间 切 换 。 你 也 
可 以 在 这 里 创建 新 的 scheme 文 件 或 复制 已 有 的 。 


为 了 实现 在 不 同 构建 过 程 之 间 修 改 配置 变量 ，scheme 文 件 就 显得 很 有 用 了 , 因为 它们 允许 我 
们 快速 切换 不 同 的 构建 配置 。 构建 配置 是 编译 iOS 应 用 时 用 到 的 设置 集合 。 所 有 全 新 iOS 工 程 的 默 
认 构 建 配 置 为 Release 和 Debug 两 项 。 在 工程 设置 的 configurations 菜 单 中 ， 可 以 很 方便 地 添加 新 
的 构建 配置 ， 或 复制 已 有 的 。 
























































四 Info 
PROJECT 
Vv Deployment Target 
国 Myagi 
TARGETS iOS Deployment Target 7.0 国 
回 Myagi 
MyagiTests 了 Configurations 
Name Based on Configuration 
Pp Debug 1 Configuration Set 
* Release 1 Configuration Set 
bP Staging 1 Configuration Set 
Pp Debug-StagingAPI 1 Configuration Set 
P Debug-ProdAPI 1 Configuration Set 
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在 Myagi 工 程 中 ， 我们 使 用 不 同 的 构建 配置 来 修改 配置 变量 。 如 上 图 所 示 ， 我 们 有 
Debug-StagingAPI 和 Debug-ProdAPI 两 项 配置 ， 根 据 所 选 的 配置 ， 应 用 就 会 使 用 不 同 的 API 服 务 端 
URL。 要 创建 新 的 配置 ， 只 要 复制 一 个 已 有 的 配置 ( Debug 或 ReLtease )， 进 行 恰 当 的 命名 ， 然 后 
创建 一 个 使 用 该 配置 的 scheme 文 件 〈 或 是 复制 一 个 已 有 的 )。 要 改变 与 scheme 文 件 关联 的 构建 配 
置 ， 只 要 编辑 该 scheme， 找 到 Build _ Configuration 菜单， 选择 相应 的 配置 即 可 ， 如 下 图 所 示 。 






































《> 


Build Configuration “Debug 








有 了 新 组 合 的 构建 配置 与 scheme 文 件 , 接着 就 可 以 用 自 定义 的 构建 脚本 为 该 scheme 文 件 设置 
正确 的 配置 变量 。 


3.5.3” 自 定义 构建 脚本 


在 Xcode 中 可 以 添加 自 定义 的 shell 脚 本 ， 作 为 应 用 构建 过 程 的 一 部 分 来 运行 。 具体 的 操作 步 
又 是 ,在 文件 树 中 点 击 你 的 工程 > 选择 工程 的 target > 点 击 build phases > 点 击 + 按 钮 > 点 击 New Run 
Script Phase， 如 下 图 所 示 。 


加 General Capabilities Resource Tags Info Build Settings Build Phases :| 























PROJECT 十 
加 Myagi New Copy Files Phase 
TARGETS New Run Script Phase 
New Headers Phase 


[MyagiTests 





Pp Copy Bundle Resources (15 items) 





这 个 脚本 将 会 在 构建 过 程 中 运行 ， 可 以 用 它 在 environment.plist 文 件 中 写 和 人 值 ， 以 便 通 过 
react-native-env 模 块 来 访问 。 

为 了 知道 写 入 什么 值 , 构建 脚本 需要 知道 当前 的 构建 配置 , 幸运 的 是 可 以 通过 CONFIGURATION 
环境 变量 来 取得 。 因 此 , 构建 配置 的 值 决定 了 配置 变量 的 值 ， 并 且 可 以 用 scheme 文 件 来 快速 切换 
构建 配置 。 以 下 是 Myagi 构 建 脚本 的 精简 版 ， 只 包含 了 设置 ApPIServerURL 值 的 代码 。 


set -e 





















































# 设置 environment.plist 文 件 的 路 径 
env_plist=$dir/environment.plist 
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# 设置 api_server_url 的 默认 值 
api_server_UrL="http://LocaLhost:8000" 


# 通过 CONFIGURATION 环 境 变量 决定 当前 的 构建 配置 ， 然 后 根据 配置 决定 api_server_urL 的 值 
if [ "$CONFIGURATION" == "Debug" ]; then 


# 如 果 是 debug 配 置 ， 使 用 当前 计算 机 的 本 地 IP 地 址 作为 服务 器 地 址 
api_server_UrL="http:// 信 ipconfig getifaddr en0 :8000" 


作 
if [ "$CONFIGURATION" == "Release" ]; then 


# 如 果 是 release 配 置 ， 使 用 生产 环境 的 API 
api_server_url="http://myagi.com/api/v1" 


fi 
# 使 用 PlistBuddy 程 序 把 API 服 务 端 的 URL 值 写 入 environment.plist 文 件 ， 


# 以 便 在 JavaScript 执 行 环境 内 访问 它 
/usr/Libexec/PListBuddy -c "Set :"APIServerURL" $f{api_server_url}" $env_plist 


这 个 脚本 完成 后 ， 就 能 保证 为 当前 配置 正确 设置 了 API 服 务 端 URE 的 值 ， 并 且 能 通过 切换 
scheme 文 件 来 方便 地 修改 配置 。 最 后 ， 在 应 用 内 就 可 以 使 用 react-native-env 模 块 来 获取 并 使 用 
URL 值 。 























3.6” 跨 平台 代码 共享 


React Native 的 主要 优势 之 一 在 于 ， 它 使 得 OS 应 用 、Android 应 用 以 及 Web 应 用 的 代码 与 资源 
可 以 共用 。 由 于 框架 用 JavaScript 编 写 ， 既 可 以 在 Web 浏 览 器 也 可 以 在 原生 应 用 中 执行 。 实 际 上 ， 
就 像 本 章 开 头 所 说 的 那样 ，React Native 最 吸引 Myagi 团 队 的 方面 就 是 跨 平台 代码 共享 的 能 力 。 

当然 ， 代 码 共 享 并 不 仅仅 是 把 一 个 平台 的 代码 复制 到 男 一 个 平台 上 ， 然 后 点 击 一 下 “运行 ” 
那么 简单 。 实 际 上 ， 不同 平台 之 间 不 能 共享 整个 完整 的 代码 库 ， 只 有 其 中 的 一 大 部 分 可 以 。 对 每 
个 平台 来 说 ， 总 会 有 一 部 分 代码 只 适用 于 它 自 己 。 

这 绝对 可 以 算 一 个 优点 ， 鉴 于 用 户 对 iOS、Android 以 及 Web 应 用 在 视觉 与 使 用 体验 上 有 不 同 
的 期 待 。 举 例 来 说 ， 我 们 希望 iOS 应 用 可 以 遵循 :OS 设计 指南 ( https://developer.apple.conylibrary/ 
ios/documentation/UserExperience/Conceptual/MobileHIG/ ), 而 Android 应 用 要 遵循 Android 设 计 指 南 
( https://developer.android.com/design/index.html )。 遵 循 这 些 不 同 的 设计 指南 ， 就 必然 意味 着 你 的 
应 用 在 不 同 平台 上 有 不 同 的 视觉 与 使 用 体验 。 

或 者 ， 你 可 以 选择 无 视 这 些 设计 指南 ， 开 发 一 个 在 iOS、Android 以 及 Web 浏 览 器 中 看 起 来 一 
样 的 应 用 。 这 种 做 法 绝对 可 行 ; 像 Phonegap 和 Triggerio 这 样 的 技术 就 可 以 用 兼容 Web 的 语言 
(HTML 、CSS 与 JavaScript ) 来 开发 应 用 ， 并 在 不 修改 代码 的 情况 下 部 署 成 原生 的 OS 和 Android 
应 用 。 然 而 ， 因 为 前 面 提 到 的 对 不 同 平台 的 期 望 存在 差异 ， 这 种 “一 次 性 开发 ， 全 平台 运行 ”的 
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方式 会 带 来 一 些 问题 。 此 外 , 在 某 个 平台 上 完美 运行 的 代码 很 可 能 在 男 一 个 平台 上 运行 得 很 糟糕 
(尤其 CSS 方 面 经 常 出 现 这 种 问题 )。 试 图 一 次 性 开发 应 用 并 让 它 可 以 在 全 平台 上 和 运行， 必然 意味 
着 要 处 理 不 断 出 现 的 设备 特定 问题 和 变化 。 


React Native ( 以 及 React ) 的 设计 理念 不 是 让 开发 者 “一 次 性 开发 ， 全 平台 运行 ”， 而 是 “一 
次 性 学 习 ， 全 平台 开发 "， 这 种 理念 在 于 你 学 习 了 React 和 React Native 之 后 ， 可 以 用 这 些 技能 为 任 
何 支持 的 平台 开发 应 用 。 事 实 上 ， 如 本 章 前 面 提 到 的 ，React Native 确 实 支持 代码 共享 ， 并 且 也 
不 只 是 “一 次 性 学 习 ， 全 平台 开发 "， 它 还 支持 “一 次 性 开发 大 部 分 代码 ， 全 平台 运行 ”的 方式 。 
正 因为 如 此 ，React Native 使 得 开发 团队 能 够 使 用 自身 所 有 的 技术 栈 ， 还 能 跨 平台 共用 部 分 代码 ， 
同时 能 够 方便 地 开发 用 户 界 面 ， 让 视觉 与 使 用 体验 都 符合 运行 环境 的 期 望 。 














3.6.1 代码 共享 的 利 与 次 

在 深入 了 解 那些 跨 平台 代码 共享 的 技巧 之 前 ,值得 先 提 一 提 这 种 做 法 的 利 与 浆 。 

正如 之 前 提 到 的 , 跨 平 台 代 码 共享 的 益处 非常 明显 : 你 不 需要 为 不 同 平台 一 遍 又 一 遍地 重 写 
那些 本 质 功能 一 样 的 代码 。 而且, 你 只 需要 学 习 一 套 共 享 模块 , 不 用 学 习 如 何在 各 个 平台 上 完成 
同样 的 事情 。 

然而 应 用 之 间 共 享 大量 代 码 也 存在 商 端 : 不 断 增加 的 依赖 项 。 一段 代 码 复 用 的 程度 越 高 ， 对 
它 的 依赖 也 就 越 多 。 如 果 这 上段 代码 有 一 些 改动 , 那 就 要 考虑 改动 会 对 用 到 这 段 代码 的 所 有 地 方 造 
成 什么 样 的 影响 ,这 非常 重要 。 当 然 ， 应 用 中 涉及 代码 复 用 的 场景 都 需要 处 理 这 样 的 问题 ,然而 
代码 在 多 个 平台 与 环境 共享 时 ， 随 着 可 能 的 依赖 项 逐渐 增加 ， 这 个 问题 就 没 那 么 简单 了 。 一 个 改 
动 可 能 在 某 个 平台 上 有 效 ， 但 在 另 一 个 平台 上 可 能 会 出 现 问题 ， 你 在 修改 代码 时 要 牢记 这 一 点 。 
这 种 依赖 问题 的 解决 方案 有 以 下 两 个 。 
口 全 面 的 测试 流程 一 自动 化 测试 做 到 位 ， 你 就 能 轻松 得 知 共享 代码 里 的 改动 不 会 对 特定 平 
台 的 某 个 特性 造成 影响 。 
口 对 多 个 平台 之 间 共 享 的 代码 进行 修改 的 流程 要 清晰 。 
接 下 来 介绍 一 下 跨 平台 共享 代码 的 流程 ， 随 后 的 章节 中 会 介绍 测试 。 









































3.6.2 ”1iOS 与 Android 间 的 代码 共享 


开始 学 习 原 生 应 用 和 Web 应 用 之 间 的 代码 共享 之 前 ， 先 来 介绍 一 下 iOS 和 Android 之 间 的 做 
法 。React Native 共 享 :OS 和 Android 的 代码 有 两 种 方式 能 做 到 : 使 用 特定 平台 的 扩展 , 以 及 内 置 的 
PLatform 模 块 。 

1. 特定 平台 扩展 

React Native 提 供 了 特定 平台 扩展 这 一 有 用 的 特性 。 比 方 说 有 一 个 Button 组 件 , 我 们 希望 它 在 
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小 











iOS 和 Android 平 台 上 的 视觉 以 及 使 用 体验 完全 不 同 ， 实 际 上 可 以 为 两 个 平台 定义 两 个 独立 的 文 
件 : button.ios.js 与 button.android.js。 接 着 就 可 以 在 每 个 平台 各 自 对 应 的 文件 中 定义 Button 组 件 ， 
然后 由 React Native 负 责 按照 平台 加 载 正 确 的 那个 。 其 他 用 到 该 Button 组 件 的 文件 或 组 件 不 需要 任 
何 改 动 : 它们 只 要 像 Button 组 件 放 在 button.js 文 件 中 那样 调用 它 即 可 ，React Native 会 确保 它们 在 
当前 平台 上 可 以 取 到 正确 的 Button 组 件 。 

2. PLatform 模 块 

有 时 候 我 们 并 不 想 为 每 个 平台 完全 重新 定义 一 个 组 件 。 比 方 说 你 只 想 对 一 个 组 件 做 一 点 小 小 
的 修改 ， 使 得 它 在 Android 和 iOS 上 的 行为 或 者 呈现 方式 上 略 有 不 同 ， 这 个 案例 中 为 每 个 平台 单独 
创建 一 个 文件 将 很 繁琐 。 这 就 轮 到 原生 的 PLatform 模 块 派 上 用 场 了 。 假 设 我 们 想 要 按照 平台 稍微 
地 调整 组 件 中 的 文本 ， 可 以 像 下 面 这 样 做 。 


import { Platform, Text } from 'react-native'; 

















function WelcomeText() { 
const text = Platform.select({ 
ios: 'Welcome to our i0S app!', 


android: 'Welcome to our Android app!' 


}); 


return <Text>{text}</Text> 


如 代码 所 示 ，Platform.select 方 法 将 为 当前 的 平台 选择 正确 的 文本 值 。 





3.6.3 ”原生 应 用 与 Web 应 用 间 的 代码 共享 


共享 原生 应 用 和 Web 应 用 的 代码 库 会 更 有 挑战 性 。 这 种 做 法 的 目的 在 于 减少 两 个 代码 库 之 间 
的 代码 元 余 ， 同 时 还 要 保证 共享 代码 的 改动 不 会 对 依赖 的 代码 库 造 成 严重 问题 。 
第 一 步 ， 先 要 判断 什么 代码 可 以 共享 ,然后 制定 共享 这 些 代码 的 最 佳 计划 。 理论 上 其 实 可 以 
共享 所 有 满足 下 列 条 件 的 代码 。 
口 没有 利用 或 引用 那些 指定 环境 特有 的 组 件 , 例如 , 引用 了 React Native 内 置 View 组 件 与 Text 
组 件 的 代码 ， 它 们 不 可 能 与 运行 React 的 Web 应 用 共享 。 
口 没有 引用 环境 特有 的 库 或 内 置 工具 。 这 种 情况 主要 指 浏览 器 中 document 这 样 的 全 局 变量 ， 
它们 在 React Native 的 JavaScript 执 行 环境 中 不 存在 。 男 外 ， 部 分 的 内 置 工具 ， 比 如 fetch 
方法 ， 可 以 通过 腻子 脚本 (polyfill ) 实现 ， 因 此 用 到 这 类 内 置 工具 的 代码 就 可 以 跨 环 境 


共享 。 
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除了 这 些 限制 以 外 的 所 有 代码 , 至 少 在 理论 上 都 可 以 共享 。 但 实践 中 把 满足 共享 条 件 的 代码 
都 进行 共享 也 不 太 合理 ， 不 过 在 Myagi 应 用 中 ， 我 们 在 React Native 应 用 和 Web 应 用 之 间 设 法 共享 
了 代码 库 的 以 下 部 分 。 

口 所 有 状态 管理 代码 。 也 就 是 用 于 获取 和 更 新 数据 的 所 有 模块 。 

口 所 有 样式 变量 ， 比 如 颜色 信息 。 

口 所 有 工具 模块 。 比 如 validators 模 块 , 它 包 含 了 检测 字符 串 是 否 为 有 效 的 邮件 地 址 或 URL 

的 方法 。 

口 所 有 国际 化 (il8n ) 模块 。 它 的 方法 用 于 获取 某 个 字符 在 特定 语言 下 的 翻译 , 组 合 所 有 和 需 

要 的 翻译 文件 来 实现 该 需求 。 

口 一 些 组 件 内 的 方法 。 比 如 Form 组 件 与 相关 的 Input 组 件 包含 了 大 量 的 表单 验证 以 及 提交 人 逻 
辑 。 与 其 在 不 同 平 台 上 复制 这 些 逻 辑 ， 不 如 像 我 们 所 做 的 那样 ， 把 所 有 可 共享 的 逻辑 抽 
取出 来 ， 放 到 FormMixin 和 InputMixin 中 ， 以 便 供 原 生 组 件 或 Web 组 件 使 用 。 

为 我 们 开发 Web 应 用 比 React Native 应 用 早 了 一 年 多 ， 共 享 这 些 代码 使 得 React Native 应 用 
的 起 步 更 加 简单 。Web 应 用 中 诸多 问题 的 解决 方案 ， 由 此 可 以 用 在 原生 应 用 里 。 实 际 上 ， 利 用 这 
些 代码 减少 了 第 一 版 应 用 从 开始 开发 到 最 终 发 布 的 时 间 , 只 用 了 一 名 工程 师 三 周 左 右 的 时 间 。 这 
对 我 们 是 一 个 极 大 的 鼓舞 , 并 且 将 来 任何 时 候 我 们 想 要 为 原生 应 用 或 Web 应 用 开发 一 个 新 的 特性 
时 ， 还 能 从 代码 共享 中 受益 。 

使 用 Git 共 享 React Native 与 Web 应 用 之 间 的 代码 

共享 原生 应 用 与 Web 应 用 的 代码 有 很 多 方式 。 以 一 个 很 简单 (但 存在 问题 ) 的 方案 为 例 ， 只 
要 把 一 个 代码 库 的 代码 复制 到 另 一 个 里 就 行 。 一 开始 这 么 做 倒是 可 行 ,然而 一 旦 在 其 中 一 个 代码 
库 做 了 改动 ， 想 要 另 一 个 也 包含 这 些 改动 ， 那 就 不 得 不 手动 复制 粘贴 ， 这 很 容易 出 错 。 显 然 ， 这 
不 是 一 个 好 方案 。 

另 一 个 方案 是 把 web 应 用 和 原生 应 用 的 代码 库 放 在 同一 个 仓库 中 , 然后 把 所 有 共享 的 代码 放 
到 仓库 中 的 一 个 共享 文件 夹 下 。 这 样 两 个 代码 库 都 可 以 引用 这 个 共享 文件 夹 , 对 共享 代码 的 小 改 
动 也 就 能 更 新 到 两 个 代码 库 。 这 个 方案 更 好 ,然而 它 还 是 不 够 完美 , 正 是 因为 前 面 提 到 的 依赖 问 
题 需要 检查 对 共享 代码 做 的 任何 修改 ， 来 确保 不 会 引发 其 他 代码 库 的 问题 。 这 绝对 能 够 做 到 ， 
但 是 我 们 还 是 决定 不 用 这 个 方案 ， 因 为 把 错误 代码 放 进 生产 环境 中 的 风险 实在 太 大 了 。 

我 们 最 终 选 择 的 方案 是 使 用 Git 来 管理 Web 应 用 和 原生 应 用 这 两 个 独立 仓库 之 间 的 共享 代码 。 
Git 被 设计 成 可 以 很 方便 地 共享 多 个 地 方 的 代码 ， 因 此 这 个 方案 很 适合 我 们 。 方 案 内 容 便 是 在 主 
Git 仓 库 内 使 用 子 仓 库 。 举 例 来 说 ， 当 需要 共享 utilities 模 块 时 ,采用 以 下 操作 步骤 。 

口 打开 webapp 模 块 下 的 utilities 模 块 。 

口 在 此 处 初始 化 一 个 空 的 Git 仓 库 ， 提 交 这 个 新 仓库 并 将 其 推送 到 Git 服 务 端 (我 们 使 用 

bitbucket.org )。 

口 打开 原生 应 用 代码 库 中 我 们 想 要 复制 utilities 模 块 的 文件 夹 。 
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小 





口 用 git ctLone 命 令 从 远 端 拉 取 模块 。 
口 重要 的 是 ， 使 用 以 下 命令 ， 把 新 的 代码 添加 到 原生 应 用 的 主 仓库 中 : git add utilities/ 
&& git commit -m "Added the utilities module"。 

最 后 一 条 命令 中 最 重要 的 是 utiLities 后 面 的 正 斜 杠 。 如 果 遗 漏 了 正 斜 杠 ,那么 Git 会 把 utilities 
文件 夹 添加 成 git 子 模块 。 这 样 仍然 可 以 达到 我 们 的 目的 ， 然 而 我 们 在 实践 中 发 现 Git 子 模块 用 起 
来 很 繁琐 。 相 反 ， 加 上 了 正和 斜 红 后，Git 会 把 utiLities 模 块 当 作 普 通 文 件 夹 ， 并 忽略 它 实 际 上 是 
另 一 个 Git 仓 库 的 事实 。 


现在 我 们 要 对 原生 应 用 代码 库 内 的 utitities 模 块 进行 修改 ,接着 把 这 个 改动 同步 到 Web 应 用 
的 代码 库 中 ， 步 又 如 下 所 示 。 


口 打开 原生 应 用 代码 库 内 的 utilities 文 件 夹 。 

口 提交 并 推送 任意 的 改动 。 

口 打开 Web 应 用 代码 库 内 的 utilities 文 件 夹 。 

口 用 git 拉 取 更 新 。 

口 如 果 Web 应 用 代码 库 的 utilities 模 块 已 经 做 了 一 些 修改 ,在 合并 时 可 能 存在 冲突 。 如 果 
这 样 ， 请 解决 冲突 并 合并 。 
口 如 有 必要 ， 运 行 测试 来 确保 这 个 改动 没有 破坏 Web 应 用 的 某 些 功能 。 

口 提交 更 新 了 utilities 模 块 的 Web 应 用 代码 。 

这 个 方法 的 好 处 在 于 它 相 当 简单 , 并 意味 着 你 可 以 修改 共享 代码 库 , 还 不 用 担心 它 是 否 会 对 
用 到 这 上段 代码 的 地 方 造成 影响 。 你 要 做 的 仅仅 是 同步 改动 的 时 候 对 一 切 进行 测试 。 
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3.7 测试 


React Native 的 强大 特性 之 一 就 是 允许 快速 迭代 应 用 。 这 主要 是 缘 于 一 些 可 以 让 React Native 
开发 者 受益 的 优势 ， 并 且 传 统 的 iOS 以 及 Android 开 发 者 无 法 享受 到 这 些 优势 。 它 还 有 一 项 能 
就 是 每 次 修改 后 可 以 轻松 刷新 应 用 界面 (最近 还 可 以 热 重 载 应 用 ， 连 刷新 都 不 需要 了 )。 这 使 得 
开发 过 程 中 可 以 很 快 地 修改 并 优化 应 用 。 此 外 , 通过 使 用 微软 的 CodePush 平 台 , 实际 上 开发 者 几 
乎 能 够 立刻 把 改动 推送 给 用 户 ， 无 需 等 待 任何 应 用 商店 的 审批 过 程 。 

如 此 快 的 开发 周期 需要 警示 一 点 : 制定 恰当 的 测试 过 程 尤为 重要 。 当 你 的 团队 成 员 通过 一 条 
命令 就 能 更 新 所 有 用 户 的 应 用 时 , 你 需要 确保 成 立 完善 的 自动 化 (也 可 能 是 手动 的 ) 流程 以 保证 
更 新 不 会 影响 功能 。 这 就 必然 需要 一 个 健全 的 测试 过 程 。 幸 运 的 是 ， 有 一 些 不 同 的 技术 可 以 让 
React Native 的 测试 相对 没 那 么 痛苦。 
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3.7.1 测试 类 型 


软件 开发 过 程 有 几 种 不 同 的 测试 类 型 : 单元 测试 、 集 成 测试 、 金 丝光 测试 ( canary testing ) ” 
以 及 质量 保证 测试 等 。 为 React Native 应 用 制定 测试 流程 计划 之 前 ， 重 要 的 是 认识 到 每 种 测试 类 
型 的 利 与 次 ,这 样 才 能 决定 如 何 最 好 地 利用 每 种 测试 以 及 在 哪里 下 最 多 的 功夫 。 


在 Myagi 应 用 中 ， 我 们 把 大 部 分 心血 都 投 到 了 集成 测试 上 ， 接 着 是 单元 测试 ， 最 后 是 质量 保 
证 测试 。 下 面 将 概述 每 种 测试 类 型 。 

1. 单元 测试 

传统 上 来 讲 ， 单 元 测试 就 是 对 单一 功能 进行 测试 。 它 们 针对 应 用 的 最 小 可 测试 部 分 ,也 可 以 


看 成 组 成 逻辑 的 单元 。 实 际 中 , 单元 测试 通常 意味 着 对 单一 的 函数 或 者 方法 进行 测试 。 举 个 简单 
的 例子 ， 下 面 的 基础 JavaScript 代 码 展 示 了 一 个 函数 以 及 与 它 相 关 的 单元 测试 。 


function getAverageAge(users) { 
/* 
如 果 users 是 带 有 age 属性 的 对 象 的 数组 ， 该 函数 将 返回 平均 年 龄 
wh 
let total = 0; 
users.forEach(user => total += user.age); 
return total / users.length; 


} 





































































































function testGetAverageAge() { 
* 
该 范 数 执行 后 会 测试 getAverageAge 沪 数 ， 如 果 它 没有 返回 期 望 值 ， 将 抛 出 错误 
#/ 
Let result = getAverageAge([{ 
age: 10 





if (result !== 15) { 

raise new Error('Test failed'); 
} 
} 


在 这 个 普通 的 示例 中 , getAverageAge 函 数 是 单一 的 功能 单元 , 由 单元 测试 testGetAverageAge 
进行 测试 。 

然而 考虑 一 下 更 复杂 的 情况 ， 即 被 测试 的 功能 单元 调用 执行 了 其 他 单元 。 比 如 ， 更 新 
getAverageAge 函 数 的 最 后 一 行 代码 。 














G@) 这 种 测试 只 把 改动 的 代码 推送 给 一 小 部 分 用 户 ， 并 且 用 户 不 知道 自己 参加 了 此 项 测试 。 该 测试 目的 在 于 让 改动 
的 代码 可 以 跑 在 真实 环境 中 ， 效 果 更 直观 。 详 情 请 参见 网 页 https:Wwww.quora.com/What-is-Canary-testing。 
一 一 译 者 注 
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// safeDivide 函 数 在 第 二 参数 不 为 9 的 情况 下 ， 用 第 一 参数 除 以 第 二 参数 。 
// 如 果 第 二 参数 为 96， 就 返回 0， 而 不 是 JavaScript 除 法 默认 的 Infinity 
return safeDivide(total, users.length); 




















如 果 还 用 原来 的 testGetAverageAge 郧 数 来 测试 更 新 后 的 getAverageAge 子 数 ， 就 不 只 是 测试 
一 个 功能 单元 了 ， 而 是 至 少 测试 了 两 个 : getAverageAge 国 数 ， 以 及 新 的 safeDivide 国 数 。 另 外 ， 
safeDivide 国 数 可 能 还 调用 了 其 他 函数 来 实现 自身 的 功能 ， 也 就 是 说 也 要 对 它们 进行 测试 。 


stub (打桩) 是 这 种 问题 的 标准 解决 方案 。stub 其 实 就 是 在 测试 过 程 中 暂时 “ 重 写 ” 其 他 函 
数 ， 从 而 保证 它们 可 以 返回 特定 值 ， 也 就 解除 了 被 测试 函数 对 其 他 功能 单元 的 依赖 。 下 面 更 新 最 
初 的 单元 测试 代码 来 使 用 一 下 stub。 


function testGetAverageAge() { 
// 保存 最 初 的 safeDivide 总 数 引 用 ， 在 测试 的 最 后 还 原 它 
const origSafeDivide = safeDivide; 
// stub safeDivide 池 数 ， 这 样 它 内 部 的 简单 逻辑 就 由 我 们 掌握 
safeDivide = function(a, b) { 
return a / b; 
} 
// 运行 最 初 的 测试 
Let result = getAverageAge([{ 
age: 10 


















































if (result !== 15) { 
raise new Error('Test failed'); 


} 


// 还 原 最 初 的 safeDivide 有 函数 

safeDivide = origSafeDivide; 

} 

现在 testGetAverageAge 国 数 只 会 测试 一 个 功能 单元 ， 由 于 对 safeDivide 函 数 进行 了 stub， 当 


对 它 进行 单元 测试 时 ， 其 实 已 经 没有 什么 内 部 逻辑 了 。 


上 面 解释 了 单元 测试 的 概念 ,不 过 还 没有 介绍 它们 的 优势 。 大 体 上 说 ,单元 测试 有 以 下 几 种 
优势 。 首 先 , 它们 促使 你 按照 单一 职责 原则 来 编写 函数 、 方 法 和 类 ,这 使 你 的 代码 更 容易 理解 与 
修改 。 其 次 ,它们 让 代码 中 独立 函数 或 方法 的 重 构 变 得 更 简单 ， 因 为 这 样 一 来 你 就 能 肯定 重 构 不 
会 改变 该 函数 的 行为 。 最 后 ,它们 其 实 也 能 作为 代码 的 文档 ,因为 它们 显 式 地 定义 了 在 传人 某 些 
参数 时 函数 和 方法 的 预期 行为 。 


然而 单元 测试 也 有 缺点 , 它们 无 法 确保 你 的 应 用 在 用 户 使 用 过 程 中 一 定 能 正常 工作 。 所 有 测 
试 过 的 功能 单元 都 正常 工作 , 并 不 意味 着 它们 联合 起 来 时 整个 应 用 可 以 正常 工作 。 而 这 时 就 该 集 
成 测试 发 挥 优势 了 。 
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2. 集成 测试 

单元 测试 侧重 于 独立 功能 单元 的 正确 性 , 而 集成 测试 侧重 于 测试 多 个 功能 组 合 到 一 起 的 运行 
情况 。 实 际 上 ， 两 种 测试 绝 非 截然 不 同 。 它 们 其 实 就 是 介 于 单一 功能 测试 ( 单元 测试 ) 和 大 量 功 
能 组 合 测试 (集成 测试 ) 之 间 的 一 系列 测试 中 的 两 种 极端 情况 。 也 就 是 说 ， 两 者 之 间 的 区 别 很 重 
要 , 因此 在 编写 测试 时 务必 要 针对 两 种 极端 情况 之 一 来 进行 。 那 些 介 于 完整 集成 测试 与 单元 测试 
之 间 的 不 伦 不 类 的 测试 ， 往 往 两 种 测试 的 优势 都 得 不 到 。 

那么 集成 测试 的 优势 是 什么 呢 ? 一 般 来 讲 ， 其 优势 在 于 保证 了 提供 给 用 户 (可 以 是 传统 意义 
上 的 用 户 , 也 可 以 是 另 一 个 使 用 你 编写 的 模块 的 软件 开发 者 ) 的 产品 功能 一 致 旦 可 用 。 它 们 试 网 
确保 你 所 编写 并 且 经 过 单元 测试 的 所 有 不 同 功能 单元 能 一 起 正常 工作 。 以 下 代码 展示 了 一 个 电子 
商务 网 站 用 户 界面 的 集成 测试 ， 用 到 了 一 系列 虚构 的 辅助 函数 。 


function testUserCanPurchaseItem() { 

































































visitURL('/product/123'); 
clickOnElement( '#addToCartBtn ' ) ; 
visitURL('/myCart/'); 
clickOnElement( '#buyBtn' ) ; 


// 以 编程 方式 输入 购物 详情 


clickOnElement( '#finalizePurchaseBtn'); 
// 如 果 没 有 找到 purchaseSuccessTxt 元 素 ， 该 溃 数 将 会 抛 出 异常 
assertElementExists('#purchaseSuccessTxt'); 


} 


以 上 代码 使 用 了 虚构 的 库 , 我 们 可 以 通过 它 来 编程 模拟 用 户 操作 , 在 应 用 界面 内 导航 。 接 着 
测试 用 户 是 否 能 做 或 者 看 到 某 些 东西 。 这 和 之 前 介绍 的 单元 测试 差别 很 大 , 因为 泻 染 用 户 界面 每 
个 部 分 或 者 处 理 每 次 交互 所 需要 的 功能 单元 的 数量 可 能 非常 多 ( 10 多 个 甚至 100 多 个 函数 、 方 法 
以 及 类 )。 集 成 测试 的 目的 是 忽略 有 多 少 不 同 的 功能 单元 要 进行 测试 ， 从 而 保证 从 用 户 的 角度 上 
看 ， 应 用 能 够 正常 工作 。 

3. 质量 保证 测试 QA) 

我 们 在 Myagi 中 用 到 的 最 后 一 种 测试 类 型 便 是 质量 保证 测试 。 它 和 集成 测试 很 像 ， 只 不 过 由 
人 来 手动 进行 。 这 种 测试 类 型 的 目的 与 集成 测试 相似 ,就 是 要 从 用 户 的 角度 测试 应 用 的 所 有 功能 
可 以 正常 工作 。 区 别 在 于 ,质量 保证 测试 需要 真正 的 人 来 进行 ,因为 人 可 以 发 现 那些 设计 上 无 法 
被 集成 测试 发 现 的 问题 ， 这 也 是 这 种 测试 的 优势 。 回 到 之 前 电子 商务 网 站 的 例子 ,页 面 上 的 购买 
按钮 可 能 被 意外 地 移动 了 位 置 ， 因此 尽管 它 在 视觉 上 偏 移 了 , 但 还 是 可 以 点 击 。 集 成 测试 中 除非 
明确 指明 要 测试 这 一 点 ,否则 无 法 发 现 这 个 问题 ,而 质量 保证 测试 就 可 以 做 到 。 当 然 质 量 保证 测 
试 也 有 缺点 , 它 需 要 人 力 以 及 时 间 ， 而 集成 测试 与 单元 测试 都 是 自动 化 的 。 因此， 进行 质量 保证 
测试 的 频率 没有 其 他 测试 类 型 那么 高 。 
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3.7.2 ”单元 测试 的 实现 


在 Myagi 应 用 中 ,通常 选用 单元 测试 来 测试 那些 整个 应 用 都 普遍 使 用 的 函数 与 方法 ， 并 重点 
关注 那些 Web 应 用 和 原生 应 用 之 间 共 享 的 部 分 。 我 们 想 要 确保 这 些 共 享 的 功能 单元 始终 正确 ,并 
确保 修改 它们 不 会 在 其 他 代码 库 中 引发 意外 问题 。 同 时 , 单元 测试 也 促使 我 们 把 共享 代码 设计 成 
只 有 单一 职责 的 独立 函数 与 类 ， 这 样 使 理解 与 跨 平 台 使 用 它们 都 变 得 更 简单 。 

我 们 选择 了 测试 框架 Mocha (https:/mochajs.org/ ) 搭配 断言 库 Chai.js ( http://chaijs.com/ ) 来 
帮助 编写 单元 测试 Mocha 包含 了 一 些 定义 测试 的 基本 函数 , 还 附带 了 命令 行程 序 方便 执行 测试 。 
使 用 Mocha 编 写 的 基本 测试 集合 如 下 。 


describe('MathModule', function() { 




























































































it('can add numbers', function() { 
D; 

}); 

如 代码 所 示 ，describe 孙 数 内 定义 的 每 个 it 函 数 可 以 看 成 独立 的 测试 ， 整 个 集合 可 以 当 作为 
特定 模块 或 功能 集合 编写 的 测试 套件 ,只 要 定义 了 这 些 测试 ,并 放 在 test 目 录 下 ,就 可 以 执行 Mocha 
命令 行 工具 来 运行 它们 。 

断言 库 Chai 可 以 与 Mocha 一 起 使 用 ( 也 有 很 多 其 他 的 断言 库 可 以 用 ), 它 内 置 的 函数 可 以 用 来 
检查 测试 过 程 中 的 值 是 否 正确 。 我 们 用 Chai 来 重 写 前 面 的 例子 ， 如 下 所 示 。 


describe('MathModule', function() { 


















































it('can add numbers', function() { 
const result = MathModule.add(1, 3); 
expect(result).to.equal(4); 

]); 


3 

如 代码 所 示 ，Chai 提 供 了 expect 函 数 ， 我 们 用 它 来 测试 add 方 法 返回 的 值 是 否 正 确 。 

最 后 用 到 的 一 个 重要 的 测试 工具 是 Sinon ( http://sinonjs.org/ )。 这 个 库 可 以 很 方便 地 stub 函 数 ， 
模拟 对 象 甚至 模拟 服务 端 返 回 的 请 求 。 以 下 代码 来 自 示 例 应 用 中 的 一 个 测试 , 它 展示 了 如 何 组 合 
使 用 这 些 工 具 。 所 有 用 stateDefaultGenerator 哺 数 生 成 的 store ， 都 会 添加 一 个 getItenm 方 法 ， 测 
试 的 对 象 就 是 它 。 注意 , TestUtils.server 方 法 在 Sinon 的 fakeServer 模 块 上 做 了 一 层 简 单 的 封装 。 














beforeEach(function(){ 
// 用 sinon.fakeServer 初 始 化 服务 痛 
TestUtils. server .create(); 


}); 
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it('can get an item by id', function(done){ 


// 调用 异步 的 getItem 方 法 
FoosState. Store.getItem(1).toPromise().then(function(item){ 


// 确保 取 回 的 数据 项 有 正确 的 name 属 性 


expect(item.get('name')).to.equal('foobar'); 


// 通知 Mocha 测 试 结束 
done(); 


}); 


// 调用 getItem 时 ,使 用 sinon 触 发 响应 
TestUtils.server.respondWwith(/foos\/1\//, { 
id: 1， 
name: 'foobar' 


}); 
}); 


在 以 上 代码 中 ,我 们 测试 了 用 于 获取 Foo 数 据 项 的 getItem 方 法 。 由 于 FoosState.Store 需 要 调 
用 API 来 获取 数据 ， 我们 用 TestUtils.server 对 响应 进行 了 stub。 这 样 一 来 ， 可 以 保证 执行 测试 时 
无 需 依赖 API 服 务 端的 运行 。 





3.7.3 ”UI 集成 测试 的 实现 


虽然 我 们 的 应 用 只 需要 Mocha 和 Chai 就 能 搭建 单元 测试 ， 但 集成 测试 显然 更 加 复杂 。 这 是 因 

为 集成 测试 需要 编译 应 用 ,然后 通过 编程 与 UI 进行 交互 ,接着 测试 它 是 否 如 期 望 的 那样 正常 运行 。 
此 外 ， 还 要 保证 应 用 有 数据 可 以 展示 ， 这 意味 着 需要 搭建 模拟 API 服 务 器 ， 还 要 保证 服务 器 能 ， 
每 次 测试 返回 一 致 的 数据 。 

幸运 的 是 , taskrabbit/ReactNativeSampleApp ( https://github.com/taskrabbit/ReactNativeSampleApp ) 
个 完美 的 代码 仓库 提供 了 一 个 解决 方案 , 对 上 面 提 到 的 一 些 问题 做 了 处 理 , 我 们 几乎 完全 根据 
个 方案 搭建 了 集成 测试 流程 。 

我 们 在 集成 测试 中 用 的 关键 工具 是 Appium。Appium 是 一 个 UI 自动 化 工具 ， 它 可 以 有 效 地 让 
应 用 在 iOS 模 拟 器 中 运行 , 并 通过 JavaScript“ 控 制 ” 与 应 用 的 交互 。 这 个 过 程 还 结合 了 一 个 用 Koa 
创建 的 简单 模拟 API 服 务 器 。 有 了 模拟 API 服 务 器 ， 我 们 就 能 在 应 用 尝试 访问 API 时 准确 地 定义 要 
响应 的 数据 。 


以 下 登录 界面 的 测试 展示 了 如 何 组 合 使 用 这 些 工具 。 


it('should aLLow login with valid data', function* (driver, done) { 
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// 获取 页 面 上 的 元 素 
Let email = yield driver.elementById('Email'); 


Let password = yield driver.elementById('Password'); 
Let submit = yield driver.elementById('Submit'); 


// 更 新 输入 框 内 容 


yield email.setImmediateValue( 'test@test.com'); 


yield password.setImmediateVaLue( "123456 ' ) ; 


// 当 应 用 尝试 登 录 时 ， 通 知 服务 端 返 回 成 功 的 响应 
server.post('token_auth', { token: '123' }); 


server.get('users/current', fixtures.currentUser()); 


server.get('training_plans', []); 


// 触发 登录 操作 
yield submit.click(); 


// 过 渡 到 有 访问 权限 限制 的 页 面 
yield driver.elementById('Training'); 


// 通知 Mocha 测 试 结 
done(); 


}); 




















尽管 这 段 测试 代码 很 得, 它 还 是 做 了 很 多 事情 。 首先, 需要 重点 关注 的 是 定义 该 测试 的 函数 























是 一 个 生成 器 。 从 function 关 键 字 ( function* ) 后 面 带 有 的 星 号 可 以 得 知 。 生 成 能 ( generator ) 
是 JavaScript 中 的 新 特性 ， 它 让 函数 的 调用 者 可 以 有 效 地 “和 暂停 ”函数 的 执行 , 并 在 之 后 某 个 时 刻 


恢复 。 这 种 情况 下 使 用 生成 器 让 我 们 的 测试 定义 非常 整洁 , 除 此 以 外 可 能 没有 其 他 的 方式 能 做 到 。 
这 个 测试 过 程 需 要 暂停 的 理由 在 于 通过 Appium 访 问 元 素 是 异步 的 。 举 例 来 说 ， 尝 试用 
driver .elementById('Email'); 这 行 代码 访问 邮件 地 址 输入 框 ， 这 实际 上 就 是 异步 执行 的 。 正 因 




















如 此 ， 需 要 在 获取 元 素 时 “暂停 ”测试 过 程 ， 等 取 回 元 素 后 下 
yield 声 明 就 能 实现 这 点 。 每 条 yield 声 明 表示 “执行 当前 的 异步 声明 ， 等 


面 的 ”。 





使 用 yield 声 明 ， 我 们 可 以 检查 屏幕 上 是 否 存在 特定 的 元 素 。 这 就 是 上 述 代 码 的 
的 内 容 : 找到 带 有 Email、Password 还 有 Submit 标 签 的 输入 框 。 接 着 ， 再 





















































继续 执行 下 一 行 。 生 成 器 允许 只 用 





成 后 














再 接着 执行 后 


和 


前 三 行 实现 


driver 对 象 和 yield 声 


明 来 设置 邮件 与 密码 输入 框 的 值 。 然 而 在 通知 Appium 按 下 Submit 按 钮 前 ， 我 们 实际 上 用 server 
模块 定义 了 在 特定 的 API 路 径 被 访问 时 服务 端 要 返回 的 内 容 。 举 例 来 说 ， 我 们 知道 应 用 尝试 登录 
时 ， 会 向 token_auth 路 径 发 起 一 条 请 求 ， 并 且 如 果 登 录 请 求 成 功 了 ， 应 用 和 希望 返回 一 个 令 牌 。 














此 ， 指 示 模 拟 服 务 器 〈 由 Koa 搭 建 ) 完全 这 样 来 做 。 








一 旦 指示 服务 器 要 返回 正确 的 值 ， 就 能 调用 yieLd submit.cLick()， 这 行 代 码 通知 Appium 点 
击 提交 按钮 。 接 着 应 用 会 调用 由 Koa 模 拟 的 API 路 径 ， 再 接着 就 会 返回 表示 登录 成 功 的 值 。 最 终 ， 


























检查 一 下 应 用 是 否 过 渡 到 了 Training 界 面 ， 这 正 是 登录 成 功 后 的 期 望 行为 。 
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于 是 ， 你 见 到 了 如 何 组 合 使 用 所 有 不 同 的 技术 要 素 ( Appium、Mocha 、Koa 以 及 Chai 等 ) 来 
定义 清晰 明了 的 集成 测试 。 另 外 , 尽管 集成 测试 很 有 效 而 且 非 常 容易 编写 ,它们 要 花 大 量 时 间 去 
和 运行。 实际 上 ,仅仅 编译 应 用 并 启动 模拟 器 就 要 花 超 过 一 分 钟 的 时 间 ， 而 这 正 是 执行 单个 测试 之 
前 的 必要 过 程 。 因 此 ， 集 成 测试 的 执行 可 能 很 慢 ， 并 且 这 样 做 需要 面 对 绥 慢 的 迭代 周期 。 












































3.7.4 QA 测试 


QA 测试 是 应 用 的 改动 部 署 给 用 户 之 前 的 最 后 一 道 防线 。 正 如 之 前 提 到 的 ， 这 个 过 程 完全 手 
动 进 行 ， 但 我 却 要 极力 推荐 。 保 持 QA 测 试 一 致 性 的 简单 方式 ， 就 是 在 电子 表格 或 者 共享 文档 中 
定义 一 系列 测试 人 员 必 须要 操作 的 “测试 用 例 ”。 在 将 改动 部 署 给 用 户 之 前 ， 开 发 者 必须 简单 地 
操作 这 些 手 动 测试 ， 并 确保 它们 能 够 “通过 ”( 即 没有 任何 差错 )。 

尽管 QA 测试 确实 稍微 减缓 了 部 署 过 程 ， 它 仍然 是 一 种 很 好 的 方式 ， 让 你 对 应 用 的 所 有 核心 
功能 可 以 正常 运行 有 充分 的 信心 。 而 且 ， 它 通常 能 够 暴露 出 应 用 在 UI 和 UX 方面 的 问题 ， 你 可 以 
选择 在 发 布 之 前 或 者 在 下 一 个 版 本 中 进行 修复 。 这 只 是 确保 应 用 质量 能 不 断 提 升 的 一 种 方式 , 你 
要 像 你 的 用 户 那 样 来 体验 自己 的 应 用 。 























3.8 发 布 与 更 新 


传统 上 来 看 , 更 新 原生 应 用 的 过 程 很 慢 , 尤其 是 更 新 iOS 应 用 的 情况 。iOS 平 台 主 要 是 应 用 商 
店 审核 流程 的 缘故 。 每 个 提交 给 商店 的 应 用 和 更 新 版 本 必须 经 过 人 工 审核 , 这 就 意味 着 有 时 候 提 
交 应 用 后 要 经 过 很 多 天 ， 它 才能 被 用 户 获取 。 甚 至 发 布 一 个 更 新 版 本 ， 也 要 经 过 一 段 时 间 ， 所 有 
用 户 才能 都 下 载 到 新 版 本 ， 特 别 是 用 户 没 有 局 用 自动 更 新 时 。 

幸运 的 是 ， 有 了 React Native， 再 利用 微软 的 CodePush 服 务 ， 可 以 显 背 地 减少 更 新 耗 时 。 接 
下 来 将 大 致 介绍 一 下 应 用 发 布 过 程 中 如 何 结合 使 用 微软 CodePush 、 传 统 应 用 商店 更 新 流程 以 及 
Git 工 作 流 。 
































3.8.1 ”Git 工作 流 


Git 工 作 流 ( http://nvie.com/posts/a-successful-git-branching-model/ ) 其 实 就 是 使 用 Git 的 一 种 方 
法 论 。Git 本 身 的 基础 知识 超出 了 本 书 的 范畴 ， 不 过 下 面 会 简单 介绍 一 下 Git 工 作 流 。 
口 有 两 条 主 分 支 ，devetLop 与 master。master 分 文 是 发 布 给 用 户 的 应 用 最 新 版 本 。devetLop 分 
文 用 于 日 常 的 开发 。 
口 每 当 要 开发 重大 的 新 特性 时 ， 基 于 develop 分 支 创 建 特性 分 支 。 完 成 开发 后 ， 将 特性 分 支 
合并 到 develop 分 支 。 
口 每 当 要 为 用 户 发 布 更 新 时 ,将 develop 分 支 合 并 到 master 分 支 ， 通常 也 会 使 用 release 分 文 

作为 中 介 ， 接 着 部 署 更 新 。 














图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 








94 第 3 章 示例 应 用 : Myagi 




















口 如 果 因 为 发 现 了 bug 或 者 其 他 问题 ,需要 更 新 应 用 , 只 需 简单 地 基于 master 分 支 创建 hotfix 
分 支 ， 完 成 修复 ,将 更 新 后 的 代码 合并 到 master 与 develop 分 支 ， 然 后 基于 master 分 支 为 
用 户 推 送 更 新 。 


按 这 些 规 则 使 用 Git 的 好 处 在 于 ,它们 促使 我 们 在 master 分 文 上 始终 保存 着 应 用 最 新 最 活跃 的 
版 本 ， 而 且 可 以 很 方便 地 获取 。 这 意味 着 能 够 快速 地 创建 hotfix 分 支 来 修复 bug， 无 需 把 最 近 更 
新 的 代码 版 本 也 进行 部 署 。 这 一 点 很 重要 ， 因 为 原生 应 用 的 缓慢 更 新 流程 通常 意味 着 ,用 户 手机 
上 运行 的 应 用 版 本 与 开发 者 正在 开发 的 最 新 版 本 之 间 有 很 大 差别 。Git 工 作 流 提供 了 很 多 方便 ， 
可 以 快速 “切换 回 ” 应 用 的 活跃 版 本 修复 bug， 接 着 再 回头 开发 应 用 的 最 新 版 本 。 接 下 来 对 Git 工 
作 流 进行 更 全 面 的 描述 。 









































3.8.2 ”iOS 应 用 商店 更 新 流程 


尽管 Apple 提 供 了 应 用 商店 更 新 流程 的 详细 文档 ， 还 是 值得 在 Git 工 作 流 的 背景 下 重新 理解 一 
Myagi 团 队 中 这 个 过 程 大 致 如 下 所 示 。 


D 约定 一 个 想 要 在 应 用 商店 发 布 更 新 的 日 期 。 

口 更 新 日 期 到 来 时 ， 基 于 develop 分 支 最 新 的 提交 版 本 创建 release 分 支 。 

口 在 release 分 支 上 ,确保 单元 测试 与 集成 测试 都 能 成 功 运 行 。 

口 手动 执行 QA 测试 用 例 ， 并 根据 新 增 特性 增加 必要 的 新 用 例 。 

口 修复 上 一 个 过 程 中 出 现 的 任何 问题 ， 接 着 重复 测试 一 遍 。 

口 至 少 两 名 开发 者 审核 了 应 用 目前 的 状态 后 ， 才 能 将 其 提交 给 应 用 商店 。 

口 这 一 步 ，release 分 支 的 使 命 结 束 ， 也 就 是 ， 提交 最 新 的 改动 ， 把 它们 合并 到 master 与 

develop 分 支 ， 然 后 删除 release 分 支 。 

口 接着 ， 通 过 Xcode 编译 应 用 ， 并 提交 给 应 用 商店 等 待 审核 。 

口 最 后 ， 返 回 develop 分 支 ， 为 应 用 创建 一 个 版 本 号 。 这 样 可 以 确保 我 们 下 次 进行 更 新 时 ， 
有 对 应 的 新 版 本 号 。 

这 个 过 程 很 好 地 确保 了 应 用 的 绝 大 多 数 问题 能 在 暴露 给 用 户 之 前 得 到 修复 ,确保 这 一 点 非常 
重要 ， 因 为 如 果 发 布 后 出 现 了 问题 , 很 可 能 要 重新 进行 完整 的 审核 才能 把 修复 推送 给 用 户 (虽然 
Apple 每 年 都 允许 你 做 几 次 紧急 修改 )。 

不 过 偶然 情况 下 bug 也 会 出 现在 发 布 的 版 本 中 。 幸 运 的 是 ， 这 种 情况 下 可 以 使 用 微软 的 
CodePush , 独立 于 应 用 商店 对 应 用 进行 更 新 , 因此 就 能 绕 过 应 用 商店 审核 流程 所 必需 的 等 待 时 间 。 
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3.8.3 CodePush 更 新 流程 


比 起 用 Swift 开发 iOS 应 用 以 及 用 Java 开 发 Android 应 用 , React Native 的 主要 优势 之 一 便 是 可 以 
使 用 微软 CodePush ( https://github.com/Microsoft/code-push )。 有 了 CodePush ， 你 就 能 远程 托管 
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JavaScript 打 包 文 件 和 资源 文件 ( 放 在 微软 提供 的 服务 器 上 )， 因 此 当 用 户 打开 应 用 时 ， 他 们 的 设 
备 就 会 检查 JavaScript 文 件 (或 者 图 片 等 资源 文件 ) 的 改动 ,然后 自动 更 新 。 这 是 一 项 很 强大 的 特 
性 ， 因 为 它 意味 着 你 的 改动 几乎 能 立刻 被 用 户 获取 ， 无 需 等 待 Apple 的 批准 或 者 Google 的 分 发 。 
而 且 ，Apple 与 Google 实 际 上 允许 这 种 应 用 更 新 方式 , 也 就 是 说 这 样 做 不 会 导致 你 的 应 用 被 ?OS 或 
Android 应 用 商店 禁止 或 拒绝 。 
以 下 是 Myagi 的 操作 流程 。 
口 当 准 备用 CodePush 发 布 新 版 本 时 , 还 是 像 平常 一 样 基于 develop 分 支 创建 release 分 支 。 然 
而 ， 由 于 可 以 用 CodePush 进 行 快速 更 新 ， 实 际 上 发 布 版 本 会 更 加 频繁 ( 大 概 每 个 新 特性 
都 会 发 布 一 次 )， 而 不 用 在 发 布 前 等 待 一 堆 特性 完成 。 
口 像 往常 一 样 运 行 测试 。 不 过 随 着 发 布 的 改动 减少 ， 出 错 的 概率 会 更 小 ， 这 意味 着 测试 流 
程 的 耗 时 要 比 通过 应 用 商店 进行 更 新 少 了 很 多 。 
口 准备 就 绪 后 ，release 分 支 完 成 使 命 ， 接 着 通过 一 系列 命令 把 应 用 部 署 给 用 户 。 
@ 进行 编译 的 代码 如 下 所 示 。 


node --max-old-space-size=4096 node_modules/react-native/local-cli/cli.js 
bundle --platform ios --entry-file index.ios.js --bundLe-output ios/release/ 
main.jsbundle --assets-dest ios/release/ --dev false 


接着 通过 CodePush 进 行 发 布 的 代码 如 下 所 示 。 

code-push release -d Production myagi-ios ios/release 

当然 ， 实 际 上 我 们 不 需要 记 住 这 些 命令 并 每 次 运行 ， 它 们 被 组 合成 一 条 更 简单 的 命令 ， 
添加 到 package.json 文 件 的 scripts 部 分 ， 这 样 实际 运行 的 部 署 改 动 命令 就 简单 多 了 ， 如 
下 所 示 。 


npm run code-push-deploy-prod 


口 最 后 只 需 快速 检查 一 下 ， 从 应 用 商店 下 载 应 用 以 确保 部 署 成 功 。 要 让 推送 给 CodePush 的 
更 新 被 用 户 “安装 ”有 多 种 不 同 的 方式 。 结 合 本 例 ， 只 要 用 户 打 开 了 应 用 ， 应 用 就 会 检 
查 更 新 。 等 他 们 下 次 打开 应 用 时 ， 更 新 就 会 安装 完成 。 这 样 不 在 应 用 打开 时 立刻 进行 更 
新 ， 可 以 减少 对 用 户 产生 的 影响 ,但 又 完全 保证 大 多 数 用 户 能 得 到 更 新 ( 因为 更 新 可 以 
自动 安装 ， 用 户 无 需 面 对 提 示 框 )。 

这 种 流程 允许 在 开发 过 程 中 实现 持续 交付 。 持 续 交 付 是 指 更 新 能 以 可 持续 的 方式 快速 安全 地 
发 布 。 也 就 是 说 发 布 给 用 户 的 可 以 是 少量 更 新 , 而 不 是 大 量 改动 。 它 意味 着 我 们 的 软件 能 不 断 为 
用 户 优化 , 同时 也 减少 了 每 次 更 新 带 来 的 风险 : 更 少 的 更 新 意味 着 改动 给 用 户 造 成 主要 问题 的 可 
能 性 更 小 。 

还 要 提 一 点 , 使 用 微软 的 CodePush 并 不 是 说 不 要 通过 应 用 商店 更 新 应 用 。 我 们 仍然 必须 定期 
进行 常规 的 iOS 更 新 流程 ， 理 由 有 以 下 两 点 。 
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(1) 下 载 应 用 的 新 用 户 应 该 立刻 拥有 一 个 近期 的 版 本 。 我 们 不 希望 他 们 下 载 应 用 后 ， 还 要 等 
待 最 新 的 CodePush 更 新 ， 然 后 再 重启 应 用 。 

(2) CodePush 只 允许 我 们 更 新 JavaScript 文 件 以 及 其 他 资源 文件 ， 不 允许 重新 编译 应 用 的 
Swift/Objective-C 部 分 。 这 意味 着 如 果 我 们 为 应 用 添加 了 新 的 原生 组 件 或 模块 (通过 第 三 方 库 或 
自己 开发 )， 那 么 只 能 通过 App Store 的 发 布 流程 来 部 署 这 种 改动 。 




















3.8.4 小结 

以 本 书 介 绍 的 方式 使 用 Git 工 作 流 、 微 软 CodePush 以 及 iOS 应 用 商店 的 更 新 流程 ， 让 我 们 能 够 
在 向 用 户 发 布 更 新 之 前 很 大 程度 上 精简 团队 数量 。 同 时 , 在 测试 流程 的 帮助 下 ,我 们 能 有 充分 的 
信心 ， 发 布 给 用 户 的 任何 改动 都 不 会 严重 损害 他 们 的 体验 。 
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几乎 每 个 人 都 使 用 消息 应 用 , 并 且 大 部 分 用 的 是 移动 端 版 本 。 但 是 很 少 有 消息 应 用 把 消息 功 
能 和 位 置 功 能 集成 到 一 个 产品 中 。 附 近 有 谁 ? 你 的 朋友 在 哪里 ? 他 们 在 做 什么 ? 


TinyRobot 是 iOS 平 台 上 基于 位 置 的 消息 应 用 。 它 仍 处 于 开发 阶段 ， 不 过 大 体 上 已 经 完成 了 。 








4.1 为 何 选择 React Native 


除了 Apple Xcode 内 置 的 Objective-C 和 Swift 开 发 方式 ， 如 今 市 面 上 还 出 现 了 大 量 的 开发 平台 
( React Native 、. PhoneGap 、 Appcelerator Titanium 、 Ionic 框 架 、Intel XDK NativeScript 、DevExtreme、 
Reapp、Xamarin 等 )， 真 的 很 难 选择 。 最 简单 的 方式 就 是 用 Xcode 来 开发 , 然而 原生 开发 的 速度 非 
Br 
党 不 理想 。 


最 困难 的 部 分 莫 过 于 根据 UI 设计 师 的 原型 来 调整 原生 代码 。Xcode 内 置 的 UI Storyboard 编 辑 
器 可 以 派 上 用 场 , 但 UI 设计 师 不 会 使 用 它 ， 因 此 这 项 任务 就 落 到 了 开发 者 的 户 上 : 调整 间距 、 字 
体 、 颜 色 、UI、 部 件 以 及 布局 。 也 有 一 些 现成 的 代码 生成 器 可 供 使 用 ,不 过 它们 能 做 的 与 我 们 的 
期 望 相差 甚 远 。 此 外 ， 开 发 者 在 每 次 调整 后 都 要 重新 编译 应 用 ， 这 就 更 慢 了 。 

原生 开发 还 有 另 一 个 缺点 : 不 能 进行 真正 的 组 件 化 开发 。 分 布 式 团 队 用 iOS Storyboard 进 行 
开发 会 相当 困难 ， 另 外 也 很 难 把 应 用 拆 分 成 独立 的 组 件 来 分 别 开 发 。CocoaPods 产 品尝 试 解决 这 
个 问题 ,但 还 是 明显 影响 了 开发 速度 。 你 可 以 把 代码 放 到 Cocoapod 组 件 当 中 , 在 修改 每 个 组 件 后 
重新 构建 应 用 ， 但 这 样 做 可 能 不 时 会 发 生 各 种 各 样 的 构建 问题 。 

第 三 个 缺点 便 是 漫长 的 部 署 过 程 ， 而 且 即 使 修复 很 小 的 bug 也 必须 经 过 AppStore 的 审核 。 

男 一 方面 ，Web 开 发 就 没有 这 些 问题 ， 而 且 很 多 产品 都 尝试 把 Web 开 发 方式 带 到 iOS/Android 
应 用 中 。PhoneGap 带 头 做 了 这 种 尝试 , 它 允 许 开发 者 开发 HTML 页 面 , 然后 能 和 到 iOS 的 WebView 
容器 中 。 不 过 ， 所 有 基于 WebView 的 产品 都 有 一 个 明显 的 缺点 ， 即 性 能 远 不 如 原生 。 应 用 的 Web 
控件 与 动画 看 起 来 不 够 “原生 ”， 因 此 这 类 应 用 对 用 户 没有 吸引 力 。 

有 没有 可 能 结合 这 两 个 领域 ， 让 原生 的 动画 与 控件 兼 有 Web 开 发 的 速度 ” 能， 得 益 于 iOS 的 
JavaScriptCore 引 擎 ,我 们 可 以 不 用 WebView, 直接 在 原生 Objective-C 代 码 和 JavaScript 代 码 之 间 搭 
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建 一 个 桥接 层 。 

React Native 是 最 流行 的 产品 ， 拥 有 非常 广泛 的 社区 与 支持 ， 这 让 它 成 为 显而易见 的 选择 。 
然而 , 记 住 这 项 技术 仍然 处 于 活跃 开发 的 阶段 ,因此 某 些 情况 下 它 可 能 不 太 稳 定 。 它 会 出 现 bug， 
不 过 通常 很 快 就 会 修复 。 最 重要 的 是 ， 你 可 以 亲手 改进 几乎 所 有 功能 ， 因 为 它 是 一 个 开源 产品 。 
比如 ， 对 于 某 些 特殊 或 者 遗漏 的 原生 UI 功 能 ， 你 可 以 很 容易 地 使 用 Objective-C/Swift 开 发 自己 的 
原生 桥接 层 。 


上 一 章 介 绍 了 一 些 使 用 React Native 的 理由 ， 本 章 会 更 进一步 。 下 面 列 出 了 与 原生 
Swift/Objective-C 开 发 相 比 ，React Native 最 重要 的 优势 。 


(1) 快速 按照 设计 师 原 型 进行 UI 开 发 。React Native 使 用 JSX (类似 HTML 的 语法 ) 以 及 类 似 
CSS 的 样式 语法 ， 因 此 即使 是 设计 师 也 可 以 通过 直接 编辑 React 组 件 来 调整 样式 、 字 体 以 及 布局 。 
作为 开发 者 的 你 更 可 以 轻松 调整 ， 并 且 比 起 用 iOS Storyboard 来 编辑 要 快 2~3 倍 。 更 重要 的 是 ， 你 
可 以 “实时 ”看 到 改动 显示 在 移动 模拟 器 /设备 上 ! 不 用 每 次 都 重新 编译 应 用 

(2) 每 次 修复 bug 后 ， 无 需 把 应 用 提交 给 AppStore 审 核 。 你 可 以 很 方便 地 为 自己 的 应 用 实现 一 
套 方案 ， 从 远程 服务 器 下 载 JavaScript 文 件 包 ， 或 者 使 用 现 有 的 解决 方案 ， 比 如 CodePush 、 
AppHub.io 等 。 

(3) 组 件 化 开发 方式 以 及 使 用 强大 的 NodeJS 作 为 依赖 管理 工具 ， 人 允许 你 在 分 布 式 团队 中 开发 
\ 型 的 可 复 用 组 件 。 你 可 以 并 行 开 发 多 个 组 件 ， 然 后 轻松 组 合 起 来 ,这样 应 用 开发 的 整体 速度 就 
显著 提高 了 。 
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4.1.1 npm 











每 个 复杂 的 应 用 都 包含 数 十 甚至 上 百 个 组 件 , 因此 需要 一 个 优秀 的 包 管理 工具 。 大 量 现 有 的 
第 三 方 组 件 能 够 显著 缩短 开发 时 间 。React Native 支 持 NodeJS 包 管理 器 (npm )， 这 样 就 可 以 访问 
成 千 上 万 开发 得 很 棒 的 流行 组 件 (不 过 有 些 模块 无 法 在 React Native 环 境 下 运行 ， 但 是 可 以 在 
NodeJS 中 运行 )。 





4.1.2 ”静态 类 型 检查 工具 Flow 
Facebook 开 发 的 JavaScript 静 态 类 型 检查 工具 Flow ( https://flowtype.org )， 人 允许 你 为 所 有 数据 
定义 类 型 ， 并 在 输入 时 检查 代码 的 正确 性 。 


function bar(x: string, y: number): string { 
return x.length * y; 





} 
bar('Hello', 42); 


以 下 是 运行 Flow 后 (或 者 在 支持 Flow 的 IDE 中 ) 的 报错 信息 。 


3: return x.length * y; 
^^^^^^^A^^A^^ number. This type is incompatible with 
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2: function bar(x: string, y: number): string { 
八 八 八 八 八 八 string 


总 是 使 用 类 型 声明 非常 重要 , 这 样 可 以 避免 易 出 错 的 代码 , 并 且 无 需 运 行 和 测试 应 用 就 能 及 
早 发 现 错 误 。 





4.1.3 开源 


React Native 社 区 有 大 量 的 开源 组 件 ， 并 且 数 量 还 在 不 断 增 长 。 许 多 公司 把 自己 的 大 部 分 软 
件 都 开源 了 。 原 因 很 简单 , 为 了 更 广泛 的 社区 支持 以 及 更 好 的 软件 质量 。 用 开源 组 件 进行 应 用 开 
发 的 过 程 中 可 能 会 发 现 bug， 你 可 以 查看 源 代码 并 迅速 找到 问题 所 在 ， 其 至 可 以 提交 修复 方案 。 
其 他 开发 者 也 可 以 改进 你 的 组 件 ( 如 果 你 开源 了 它 )。 这 样 的 结果 就 是 ， 社 区 的 所 有 成 员 都 是 启 
家 ， 我 们 获得 了 稳定 健壮 的 软件 以 及 数量 不 断 增长 的 高 质量 组 件 。 












































4.1.4 响应 式 编程 

React Native 的 显著 优势 之 一 便 是 响应 式 编程 ( reactive programming )。 维基 百科 上 写 道 ,“ 响 
应 式 编程 是 一 种 编程 范式 ， 面 向 数据 流 与 变动 的 传播 "。 这 意味 着 在 所 用 的 编程 语言 中 能 够 轻松 
表达 静态 或 动态 数据 流 ， 其 背后 的 执行 模型 会 自动 通过 数据 流传 播 变 动 。 
例如 ， 在 声明 式 的 编程 环境 中 ，a := b + c 是 指 a 被 赋值 为 表达 式 b + < 立即 计算 的 结果 ， 接 
下 来 b; 和 c 的 值 发 生 改 变 ， 不 会 影响 的 值 。 

然而 在 响应 式 编程 中 ，a 的 值 会 根据 新 的 计算 结果 自动 更 新 。 

React Native 人 允许 自 定义 View 组 件 , 组 合成 一 棵 层次 结构 树 并 自动 传播 变动 。 这 与 电子 表格 很 
相似 ， 只 需 把 a 定义 成 b 与 c< 的 和 一 次 ， 每 当 b 或 c 改 变 时 就 会 更 新 a 的 值 。 这 样 的 方式 使 得 代码 量 更 
少 日 更 易 读 ， 软 件 质 量 也 比 声明 式 编程 好 了 许多 。 

















































































































4.1.5 XMPP 


可 扩展 通讯 和 表示 协议 ( Extensible Messaging and Presence Protocol, XMPP ) 是 一 种 基于 XML 
的 通信 协议 , 用 于 面向 消息 的 中 间 件 。 它 很 适合 消息 通信 , 并 且 大 部 分 流行 的 消息 应 用 都 使 用 它 。 
市 面 上 已 经 有 很 多 质量 卓越 的 XMPP 服 务 器 与 客户 端 软件 。 我 们 决定 使 用 processOne 提 供 的 
ejabberd 与 开源 的 OS 客户 端 库 XMPPFramework 来 开发 真正 可 扩展 且 稳 定 的 应 用 。 















































4.1.6 ”技术 栈 


我 们 在 应 用 中 使 用 了 以 下 技术 与 产品 。 
OD XMPP (ejabberd, iOS XMPPFramework ) 
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口 NPM 

口 React Native 

口 用 于 开发 iOS 原 生 代 码 的 XCode 与 Objective-C 
口 Flow 

口 Mobx ( 详 见 第 5 章 ) 

口 Mocha ( 用 于 单元 测试 ) 

口 Bitrise.io 用 于 持续 部 署 





4.2 可 扩展 应 用 架构 


遗憾 的 是 ，React Native 仅 仅 是 View 层 , 没有 涵盖 一 个 复杂 应 用 的 完整 架构 。 虽 然 简单 的 应 用 
可 以 把 全 部 逻辑 都 放 到 React 组 件 中 (React Native 人 允许 使 用 setState 方 法 来 操作 状态 )， 复 杂 的 跨 
平台 应 用 可 不 能 这 样 做 。Android/iOS 平 台 可 能 需要 不 同 的 View 组 件 负 责 泻 染 一 些 原生 元 素 , 而 且 
React 组 件 要 比 纯粹 的 JavaScript 更 难 测试 。 下 面 来 看 看 现 有 的 解决 方案 ， 从 中 为 我 们 的 应 用 选择 
一 个 最 优 解 决 方案 。 




















4.2.1 MVC 
经 典 架 构 模 式 ， 模 型 -视图 -控制 右 。 


上 图 的 架构 看 起 来 非常 简洁 ， 但 真正 复杂 应 用 的 情况 如 下 。 
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最 困难 的 地 方 在 于 ，MVC 架 构 不 好 扩展 。 由 于 控制 器 和 视图 都 可 以 修改 模型 ， 导 致 难以 定 
位 失败 的 原因 ， 另 外 修改 链 很 容易 就 会 拉 得 很 长 : 控制 絮 修 改 了 模型 A, 模型 A 再 修改 视图 B, 视 
图 B 接 着 修改 了 模型 C， 模 型 C 又 修改 了 视图 C 与 D ， 以 此 类 推 。 要 为 复杂 应 用 维护 这 样 的 模式 非 
常 困难 。 再 者 ， 由 于 模型 和 视图 全 都 相互 依赖 ， 测 试 的 难度 也 相当 大 。 








4.2.2 Flux 


为 了 改进 开发 流程 ，Facebook 提 出 了 Flux 架 构 模 式 来 取代 MVC。 











它 看 起 来 并 没有 比 MVC 好 多 少 ， 尤 其 是 复杂 应 用 的 情况 下 。 


action 


Ildeil 


action 





action 了 a 





P| A 
action 1 


action 齐 








不 过 ， 它 与 MVC 有 显著 的 区 别 ， 所 有 数据 向 一 个 方向 传输 〈 单 向 数据 流 )， 这 使 得 它 很 方便 
调试 与 维护 。 
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4.2.3 Redux 
Redux ( http://redux.js.org/ ) 作为 另 一 个 MVC 的 替代 方案 ,与 Flux 很 相似 。 它 不 再 需要 编写 自 
定义 的 分 发 器 ， 而 是 引入 了 纯 函 数 形式 (pure function ) 的 reducer， 按 照 给 定 的 action 对 store 进 行 


修改 ， 状 态 改变 后 视图 也 随 之 改变 。 


Redux 数 据 流 


dispatch(action) (previousState, action) 


reducer 


newsState 





交互 操作 ， 例 如 onClick 


React + Redux @nikgraf 


由 于 Redux 比 MVC 和 Flux 简 单 ， 它 成 为 了 非常 流行 的 框架 。 有 了 Redux 的 情况 下 ， 所 有 应 用 
状态 都 表示 成 一 种 结构 ( 单一 数据 源 )， 并 且 每 次 action 发 生 之 后 你 都 能 观察 到 它 是 如 何 改 变 的 。 
然而 ， 开 发 者 要 使 用 Redux 就 需要 实现 很 多 的 模板 。 

口 把 所 有 action 定 义 成 字符 串 常量 。 
口 按 switch/case 语 句 的 形式 实现 reducer， 同 时 生成 新 的 不 可 变 状态 。 


function reducer(state, action) { 
switch (action.type) { 
case ACTION_NAME1: 
return modify1(state) 
case ACTION_NAME2 : 
return modify2(state) 
case ACTION_NAME3 : 
return modify3(state) 
default: 
return state; 
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口 在 视图 层 里 触发 action 。 


<TouchabLe0pacity onPress={ 
()=>this.props.dispatch({ 
type: ACTION_TYPE, 
data: custom data 
}> 
<Text>Button</Text> 
</TouchableOpacity> 


如 上 所 示 ， 为 reducer 传 递 数据 要 编写 很 多 元 余 的 代码 : 数据 上 映射、 繁琐 的 switch/case 语 句 、 
action 常 量 。 当 发 起 HTTP 请 求 ( 进行 异步 操作 ) 时 会 遇 到 更 多 问题 ， 需 要 使 用 Redux Thunk 
( https://github.com/gaearon/redux-thunk ) 来 定义 action 生 成 器 ,参见 如 下 的 简化 版 本 。 


export function fetchposts(subreddit) { 
return function (dispatch) { 
dispatch(requestPosts(subreddit)) 
return fetch( “http://www.reddit.com/r/${subreddit}.json') 
.then(response => response.json()) 
.then(json => 
dispatch(receivepPosts(subreddit, json)) 


) 

















} 
} 
此 外 ， 也 可 以 使 用 Redux Saga (https://redux-saga.github.io/redux-saga/ ) 或 Redux Side Effects 
( https://github.com/salsita/redux-side-effects ) 这 两 个 库 。 


上 述 代 码 读 写 起 来 不 够 简单 明了 。 实 际 上 ，Redux 开 发 者 要 亲自 编写 所 有 状态 管理 的 代码 。 
Redux 在 状态 管理 上 几乎 已 经 提供 了 不 少 帮助 ， 它 只 是 把 action 分 发 给 reducer， 再 把 新 的 状态 
connect 到 视图 上 。 在 使 用 了 Redux 几 个 月 后 , 我 们 意识 到 编写 模板 以 及 模拟 状态 转换 花费 了 太 多 
精力 。 实 现 一 条 复杂 的 异步 操作 链 难度 很 大 , 我 们 的 应 用 包含 hessages 数 据 , 每 条 Message 包 含 参 
与 者 (Profiles )， 每 个 Profile 又 有 头像 (File )，FitLe 又 包含 元 数据 (URL 和 媒体 类 型 )， 而 且 
所 有 这 些 操 作 都 要 一 个 接 一 个 地 异步 完成 。 此 外 ， 为 了 高 效 ， 还 得 尽 可 能 缓存 数据 。 应 用 还 有 
Friend Lists 数 据 也 包含 Proftte， 因 此 一 个 好 友 列 表 也 需要 相同 的 异步 操作 链 。 用 Redux 来 完成 
这 样 的 任务 真 的 是 一 大 挑战 。 







































































4.2.4 MobX 与 Redux 的 比较 


直 党 上 看 ， 寻 找 一 个 像 React Native 一 样 遵 循 响 应 式 编程 原理 的 框架 意义 很 大 。Flux 与 Redux 
首先 尝试 着 模仿 了 响应 性 ， 声 明 状态 〈 模 型 ) 应 该 如 何 按照 给 定 的 action (事件 ) 来 改变 。 遗 憾 
的 是 要 编写 很 多 代码 , 并 且 开 发 者 需要 负责 保持 一 切 同 步 。 如 果 某 人 的 个 人 简介 或 者 头像 改变 了 ， 
状态 中 任何 一 处 都 不 会 自动 随 之 改变 ; 你 需要 亲自 动手 实现 。 


好 在 新 的 框架 MobX ( https://mobx.js.org/index.html ) 提供 了 让 所 有 数据 自动 同步 的 特性 ， 你 
要 做 的 只 是 用 @observable 来 声明 数据 。 它 的 主要 原理 与 Flnx 和 Redux 相 似 , 并 且 也 遵循 单 向 数据 流 。 
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| 修改 更 新 
action， 
socket. 加 ED 加 视图 


触发 











对 于 更 复杂 的 应 用 来 说 , 很 有 必要 在 action 和 状态 之 间 引 入 store, 好 比 MVC 的 控制 器 或 Redux 
的 reducer， 也 就 是 改变 应 用 状态 的 类 。 每 个 改变 状态 的 方法 应 当 标 记 为 eactton。 所 有 依赖 属性 
应 当 标 记 为 computed。 当 任何 所 依赖 的 可 观察 数据 改变 时 ， 依 赖 属性 会 自动 重新 计算 。 

autorun 与 reaction 国 数 用 于 在 状态 改变 时 运行 用 户 定 义 的 函数 。 以 下 的 例子 来 自我 们 的 应 
用 ， 对 “实时 ”搜索 特性 进行 处 理 。 


reaction(()=> this.global, text => { 

if (!text.length) { 
this.globalResult.clear(); 

} elsef{ 
return this.search(text).then(data=> { 

this.globalResult. replace( 
data.hits.map(el=> 
this.profile.create(el.objectID, el)). 
filter(el=>!el.isOwn)); 


























]); 
} 

}, false, 500); 

上 述 代 码 对 this.gtlobal 变 量 (输入 文本 值 ) 的 变化 进行 观察 ， 执 行 搜索 查询 (this.search 
函数 ) 并 对 结果 进行 处 理 。 人 参数 506 表 示 刷 新 时 间 ( 以 毫秒 为 单位 )， 查 询 操作 会 在 最 后 一 次 输入 
文本 值 的 500 毫 秒 后 运行 。 这 样 应 用 就 不 会 在 用 户 输入 的 过 程 进行 搜索 查询 ， 因 此 UI 就 更 具 响 应 
性 而 且 更 快 。 

下 面 来 看 看 MobX 与 Redux 的 主要 区 别 。 

( Redux 的 基础 是 不 可 变性 ， 而 MobX 框 架 是 可 变 的 。 不 可 变性 本 身 是 很 好 的 概念 ， 也 多 亏 
了 Redux 让 它 如 今 这 么 流行 ， 然 而 通过 这 种 方式 很 难 实现 某 些 任务 。 有 了 可 变性 以 及 MobX 之 后 ， 
开发 者 必须 更 小 心 严谨 地 遵循 单 向 数据 流 ( 这 样 视图 就 不 能 更 新 模型 ， 只 能 执行 store 提 供 的 
action )。 通 过 这 样 的 方式 ， 就 能 在 不 需要 任何 模板 的 情况 下 ,很 好 地 处 理 异 步 请 求 与 缓存 这 种 很 
困难 的 任务 。 我 们 的 应 用 使 用 MobX 与 领域 模型 ( domain model ) 下 载 消息 数据 ， 其 中 包含 了 消 
息 参 与 者 的 ID 和 消息 图 片 文 件 的 ID ， 然 后 下 载 消 息 参 与 者 的 ID 数据 ， 其 中 包含 头像 文件 的 ID ， 
接着 下 载 恰 当 的 文件 ,执行 这 些 任 务 的 同时 还 对 数据 进行 高 效 缓 存 , 并 显示 先前 的 消息 (这样 用 
户 无 需 等 待 一 切 加 载 完 毕 ， 就 可 以 马上 开始 阅读 消息 )。 相 比 一 大 堆 的 Redux reducer、 各 种 异步 
操作 还 有 重复 数据 ，MobX 的 做 法 更 合适 。 
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(2) MobX 人 允许 使 用 类 实例 〈 领域 对 象 模型 )， 而 Redux 只 能 使 用 纯 JavaScript 对 象 (数组 、 映 
射 、 基 本 类 型 )。 

(3) MobX 提 供 了 计算 值 (computed value ) 作为 可 观察 值 的 简单 依赖 函数 ， 并 自动 保持 两 者 
同步 。 在 Redux 中 你 需要 亲自 重新 计算 这 类 值 并 保证 结果 正确 。 换 句 话 说 ，Redux 需 要 你 在 脑海 
中 模拟 所 有 的 状态 转换 ， 而 MobX 会 自动 为 你 完成 。 

(4) MobX 包 含 更 精简 的 代码 。 它 与 Redux 最 主要 的 区 别 就 是 少 了 各 种 模板 。 来 看 一 个 简单 的 
计数 器 应 用 ， 它 也 会 计算 操作 的 次 数 。 

Redux 的 方式 

从 actions.js 开 始 : 


export ACTION_INCREASE = "INCREASE"; 
export ACTION_DECREASE = "DECREASE"; 


接 下 来 是 reducer.js: 


import {ACTION_INCREASE, ACTION_DECREASE} from 'actions'; 

















export default function reducer(state = {data:0, total:0}, action) { 
switch (action.type) { 
ACTION_INCREASE: 
return { data: state.data + 1, total: state.total + 1 } 
ACTION_DECREASE: 
return { data: state.data - 1, total: state.total + 1 } 
default: 
return state; 


3 


counter.js: 


import React from 'react'; 

import { View, Text } from 'react-native'; 

import { ACTION_INCREASE, ACTION_DECREASE } from 'actions'; 
import { connect } from 'react-redux'; 

import Button from 'react-native-button'; 





function Counter({dispatch, counter, total}){ 
return <View> 
<Text>Counter: {counter}</Text> 
<Text>Total clicks: {total}</Text> 
<Button onpress={ 
()=>this.dispatch({type: ACTION_INCREASE}>+ 
</Button> 
<Button onpress={ 
()=>this.dispatch({type: ACTION_DECREASE}>- 
</Button> 
</View>;} 
export default connect((state) => state)(Counter) 
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app.js: 


import React, { Component } from 'react-native'; 
import { createStore, Provider } from 'react-redux'; 
import reducer from './reducer'; 

import Counter from './counter’ 

import createStore from './createStore' 

const store = createStore(reducer) 


const Main = () => { 
return ( 
<Provider store={store}> 
<Counter /> 
</Provider> 
) 
} 


export default Main 


MobX 的 方式 
store.js: 


import {action, reaction, observable} from 'mobx'; 
import autobind from 'autobind-decorator' 


@autobind 

class CounterStore { 
@observable counter = 0; 
@observable total = 0; 


Qaction increase(){ 
this.counter++; this.total+t+; 


} 


Qaction decrease(){ 
this.counter--; this.totaL++; 


} 
} 


export default new CounterStore(); 


app.js: 


import React from 'react'; 

import { View, Text } from 'react-native'; 
import { observer } from 'mobx-react/native'; 
import Button from 'react-native-button'; 
import store from './store’'; 


@observer 
function Counter({store}){ 
const store = this.props.store; 
return <View> 
<Text>Counter: {store.counter}</Text> 
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<Text>Total clicks: {store.total}</Text> 

<Button onpress={store.increase}>+</Button> 

<Button onpress={store.decrease}>-</Button> 
</View> 


} 


const Main = () => { 
return <Counter store={store}/> 


} 


export default Main 


如 果 你 在 最 简单 的 计数 器 应 用 中 都 看 到 了 差别 , 那么 可 以 想象 , 把 TinyRobot 应 用 从 Redux 迁 
移 到 MobX 后 的 差别 会 有 多 大 。 以 下 是 用 MobX 写 的 chats 模 型 ( 聊天 列表 ) 的 例子 。 用 Redux 完 
成 同样 的 任务 要 多 出 30% 的 代码 。 


export default class Chats { 
@observable _list:[Chat] = []; 
@computed get list(): [Chat] { 
return this. list.sort((a: Chat, b: Chat)=>{ 
if (!a.last) return 1; 
if (!b.last) return -1; 
return b.last.time - a.last.time; 


于 
} 


@action add = (chat: Chat): Chat => { 
assert(chat, "chat should be defined"); 
console.log("Chats.add", chat.id); 
const existingChat = this.get(chat.id); 
if (!existingChat){ 
this. list.push(chat); 

} else { 
console.log("Chat exists"); 
return existingChat; 

} 


return chat; 


}; 














get(id:string): Chat { 
return this. list.find(el=>el.id === id); 


} 


@action clear = () => { 
this._list.splice(0) 
}; 


@action remove = (id: string) => { 

assert(id, "id is not defined"); 

this. list.replace(this. list.filter(el=>el.id != id)); 
}; 
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MobX 中 action 成 为 了 真正 的 JavaScript 函 数 ， 并 且 MobX 会 自动 同步 可 观察 模型 与 视图 。 





4.2.5 ”领域 对 象 模 型 


我 们 决定 把 所 有 应 用 状态 都 放 到 一 个 类 里 ( 也 就 是 Redux 的 “单一 数据 源 ” 概 念 )， 这 个 类 就 
是 包含 可 观察 变量 的 模型 。 不 同 的 store 改 变 模型 中 对 应 的 部 分 ( 就 像 Redux 的 reducer 改 变 全 局 应 
用 状态 中 属于 它 的 那 一 部 分 )， 一 旦 模型 改变 ， 视 图 就 重新 泻 染 。 这 样 一 来 ， 就 能 结合 两 个 领域 
的 概念 : MVC 中 简单 的 JavaScript 语 法 ， 以 及 Redux 的 可 预测 性 与 清晰 的 状态 管理 。 在 MobX 中 仍 
然 能 看 到 每 次 action 后 的 任何 状态 变化 (通过 logging 模 型 )。 


另 一 项 重大 决定 是 在 模型 中 使 用 对 象 而 非 基本 类 型 (Redux 只 操作 基本 类 型 值 ), 这 对 于 解决 
之 前 提 到 的 异步 串联 请 求 任务 很 有 必要 。 男 外 ， 这 样 做 也 允许 使 用 MobX 的 “计算 ”属性 ,或 者 
根据 其 他 可 观察 值 来 自动 刷新 值 。 


以 下 是 消息 对 象 的 例子 。 


export default class Message { 
id: string; 
@observable from: Profile; 
@observable to: string; 
@observable media: File; 
@observable unread: boolean = true; 
@observable time: Date; 
@observable body: string; 
@observable composing: boolean; 
@observable paused: boolean; 
@computed get date(){ return moment(this.time).calendar()} 


下 面 是 个 人 资料 类 ( 检查 计算 值 displayName 并 加 载 action )。 


export default class Profile { 
user: string; 
@observable firstName: string; 
@observable lastName: string; 
@observable handle: string; 
@observable avatar: File = null; 
@observable email: string; 
@observable error: string; 
@observable phoneNumber: string; 
@observable location: Location; 
@observable loaded: boolean = false; 
@observable isFollower: boolean = false; 
@observable isFollowed: boolean = false; 
@observable isNew: boolean = false; 
@observable isBlocked: boolean = false; 
@computed get isMutual(): boolean { return this.isFollower && this.isFollowed }; 


















































时 











profile; 
model; 
file; 
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@computer get isOwn() {return this.model.profile && this.model.profile.user === this.user} 


// model: 全 局 模型 
// profile: 负责 缓存 /加 载 个 人 资料 的 Profilestore 
// file: 负责 缓存 /加 载 文 件 的 FileStore 
constructor(model, profile, file, user: string, data) { 
this.model = model; 
this.profile = profile; 
this.file = file; 
this.user = User; 


if (data){ 
this. load(data); 
} elsef 
when(()=>model && profile && model.connected, 
()=>this.profile.request(user).then(this.1load)); 
} 
} 


@computed get displayName(): string { 
if (this.firstName && this.lastName){ 
return this.firstName + " " + this.lastName; 
} else if (this.firstName){ 
return this.firstName; 
} else if (this.lastName){ 
return this.LastName; 
} else if (this.handle){ 
return this.handle; 
} elsef 
return ' '; 
} 
} 


@action load(data){ 
this. loaded = true; 
Object.assign(this, data); 
if (data.avatar && (typeof data.avatar === 'string')){ 
this.avatar = this.file.create(data.avatar); 
} 
} 


我 们 使 用 了 控制 反 转 原则 ( Inversion of Control，https://en.wikipedia.org/wiki/Inversion_of_ 
control ) 使 应 用 更 加 模块 化 与 可 扩展 ， 领 域 模型 实例 接收 各 自 store 的 实例 。 如 以 上 代码 所 示 ， 
Profile 领 域 模型 依赖 了 Model、Profilestore 以 及 Filestore， 因 此 它 能 够 从 store 中 加 载 自己 ,并 
创建 相关 的 对 象 (FitLe 表 示 个 人 资料 头像 )。 之 后 还 可 以 添加 更 多 逻辑 ， 比 如 在 报错 的 情况 下 尝 
试 重新 加 载 。 














4.2.6 ”依赖 注入 


对 简单 的 应 用 来 说 ， 使 用 NodeJS 的 import 语 名 以 及 singleton 单 例 模式 的 store 实 例 就 足够 了 。 
但 这 种 方式 不 适合 复杂 的 应 用 ， 因 为 这 样 不 够 灵活 而 且 很 难 测试 。 另 外 ,， 这样 还 会 带 来 某 种 隐 式 
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依赖 ， 就 像 全 局 变量 依赖 那样 。 


假设 有 一 些 模块 依赖 了 XMPP 的 store ( 通过 NodeJS 的 import 语 句 )。 怎 样 才能 把 XMPP 库 从 
StropheJS 切 换 到 iOS 的 原生 解决 方案 ”在 完全 不 涉及 XMPP 的 情况 下 怎么 测试 这 些 模 块 ?” 最 好 且 
最 清晰 的 方式 就 是 直接 引入 XMPP 模 块 , 并 通过 构造 函数 传递 XMPP 实 例 。 这 样 你 就 能 模拟 XMPP 
模块 并 传递 给 所 有 的 单元 测试 。 


然而 ， 复 傈 的 应 用 通常 有 很 多 store 要 依赖 其 他 store， 创 建 这 类 store 非 常 麻烦 。 所 幸 npm 的 
JavaScript 模 块 constitute (https://github.com/justmoon/constitute ) 提供 了 自动 依赖 注入 的 功能 。 


原生 JavaScript 代 码 的 实例 化 示例 如 下 。 


function main () { 
const electricity = new Electricity() 
const grinder = new Grinder(electricity) 
const heater = new Heater(electricity) 
const pump = new Pump(heater, electricity) 
const coffeeMaker = new CoffeeMaker(grinder, pump, heater) 
coffeeMaker .brew() 


} 
用 constitute 这 样 的 工具 改写 后 ， 代 码 如 下 。 


function main () { 
const coffeeMaker = constitute(CoffeeMaker) 
coffeeMaker .brew() 


} 


应 用 的 全 局 模型 Rootstore 包 含 了 其 他 所 有 的 store。 我 们 用 constitute 的 @Dependencies 装 饰 髓 
为 每 个 store 声 明 依赖 ， 最 后 用 constitute(RootStore) 创 建 根 实例 。 

为 测试 代码 注入 模拟 数据 ， 可 以 像 下 面 这 样 写 。 

const container = new Container(); 

container.bindClass(XMPP, MockXMPP); 

const mock: RootStore = container.constitute(RootStore); 

接着 模拟 数据 就 会 包含 所 有 store 与 模型 ， 并 且 内 置 了 模拟 的 XMPP 模 块 。 阅 读 4.6 节 了 解 更 多 
细节 。 
























































4.2.7 持久 化 


所 有 复杂 的 React Native 应 用 都 有 一 个 明显 的 缺点 ， 即 缺少 强大 的 持久 化 机 制 。 原 生 iOS 应 用 
有 CoreData 这 样 的 框架 , 还 有 很 多 像 MagicalRecord 这 样 的 第 三 方 库 , 能 以 简单 有 效 的 方式 来 持久 
化 与 访问 数据 ,遗憾 的 是 , 为 React Native 开 发 CoreData 的 原生 桥接 层 会 有 问题 , 因为 所 有 CoreData 
数据 实体 以 及 它们 之 间 的 关系 需要 定义 成 Objective-C 或 Swift 类 。 男 一 种 选择 就 是 使 用 
react-native-sqlite-storage ( https://github.com/andpor/react-native-sqlite-storage ) 这 样 的 SQLite 桥 接 
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组 件 ， 不 过 它 只 提供 了 很 底层 的 API， 开 发 者 需要 直接 编写 SQL 查询 语句 。 


React Native 提 供 了 AsyncLocaLStorage 类 作为 简单 的 键 值 式 持久 化 机 制 ， 不 过 这 对 于 复杂 应 
用 来 说 肯定 不 够 。Redux 人 允许 开发 者 通过 redux-persist 在 AsyncLocalStorage 中 保存 或 加 载 应 用 状 
态 , 这样 可 以 从 iOS 的 文件 存储 中 加 载 初始 状态 ,并 在 每 次 action 之 后 保存 更 新 过 的 状态 。 这 对 于 
简单 的 应 用 来 说 已 经 足够 了 ， 但 如 果 你 的 状态 包含 了 上 百 个 数据 实体 ， 每 次 action 后 对 全 部 数据 
进行 保存 将 会 非常 低 效 。 

幸运 的 是 ， 最 近 发 布 了 React Native 组 件 Realm ( https://realm.io/ )， 它 提供 了 CoreData 的 一 切 
功能 ， 可 通过 基于 数据 实体 的 高 级 API 来 简单 高 效 地 保存 或 加 载 模型 。 


// 定义 模型 与 模型 属性 
class Car {} 
Car.schema = { 
name: 'Car', 
properties: { 
make: 'string', 
modeL: 'string', 
miles: 'int', 
} 
}; 
class Person {} 
Person.schema = { 
name: "Person ' ， 
properties: { 


















































name: {type: 'string'}, 
cars: {type: 'list', objectType: 'Car'}, 
picture: {type: 'data',，optional: true},// 可 选 属性 
} 
}; 


// 获取 默认 的 ReaLm， 并 支持 我 们 的 对 象 


Let realm = new Realm({schema: [Car, Person]}); 


// 创建 Realm 对 象 并 写 入 本 地 存储 
realm.write(() => { 
let myCar = realm.create('Car', { 
make: 'Honda', 
modeL: 'Civic', 
miles: 1000, 
]); 
myCar.miles += 20; // 更 新 属性 值 
]); 


// 查询 Realm， 获 取 所 有 高 里 程 车 辆 
Let cars = realm.objects('Car').filtered('miles > 1000'); 


// 返回 的 结果 对 象 包含 1 辆 车 
cars.length // => 1 


// 添加 另 一 辆 车 


realm.write(() => { 
let myCar = realm.create('Car', { 
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make: 'Ford ' ， 

model: 'Focus', 

miles: 2000， 
]); 


// 查询 结果 实时 更 新 
cars.length // => 2 


4.2.8 ”应 用 状态 管理 


复杂 应 用 最 大 的 问题 在 于 其 复杂 的 状态 。 开 发 者 通常 会 忽略 这 个 事实 , 并 且 只 用 布尔 标志 位 
( boolean flag ) 和 字符 串 状态 变量 来 管理 应 用 状态 逻辑 。 举 例 来 说 ， 应 用 在 启动 后 可 以 从 
AsyncLocalStorage 中 加 载 自身 的 状态 。 这 段 时 间 内 应 用 应 该 在 屏幕 上 显示 “加 载 ” 界面 。 应 用 加 
载 完 成 后 ， 有 用 户 凭 据 的 情况 下 应 进行 登录 ， 否则 就 显示 “宣传 ”界面 。 另 外 ， 连 接 成 功 后 得 到 
的 个 人 资料 可 能 不 够 完善 ， 这 时 就 要 把 用 户 重 定向 到 “注册 ”界面 。 如 果 用 户 的 昵称 (用户 名 ) 
已 填 ， 他 们 就 会 被 重 定向 到 登录 后 的 界面 ( 首页 )。 判 断 当 前 应 该 显示 哪个 界面 变 得 非常 麻烦 。 


function getInitialState(){ 
if (this.error || !this.server){ 
return "promo"; 



















































































if (!this.loaded || this.connecting || 
this.tryToConnect || (this.connected && 
this.profile && !this.profile.loaded)){ 
return "launch"; 


} elsef 
return this.profile && this.profile.loaded ? 
this.profile.handle ? "logged" : "signUp" : "promo"; 
} 


} 


上 面 的 代码 相当 复杂 且 无 法 扩展 。 比 如 ， 如 果 要 在 用 户 登 录 期 间 显示 另外 的 UI 界面 ( 比如 某 
种 进度 条 动画 )， 这 种 情况 下 要 怎么 修改 代码 ?” 而 且 我 们 无 法 确定 是 否 遗 漏 了 已 有 布尔 标志 位 的 
某 些 组 合 ， 或 者 是 否 正确 实现 了 当前 界面 的 判断 逻辑 。 

革 些 布尔 标志 位 的 组 合 显然 没有 任何 意义 ， 比 如 this.connecting 与 thts.connected 不 可 能 同 
时 为 true，this.error 与 this.connecting 同 理 。 因 此 ， 当 应 用 连接 成 功 后 ， 开 发 者 也 要 对 这 种 情 
况 做 处 理 (将 this.error 设 置 为 nutl, 将 this.connecting 设 置 为 false, 将 this.connected 设 置 为 
true )。 如 前 所 述 ， 这 样 很 容易 出 错 ， 并 且 会 让 应 用 的 状态 失效 。 

复杂 应 用 的 状态 还 有 男 一 个 问题 ， 即 如 何 理 解 它 并 从 源码 的 角度 看 到 它 的 全 貌 。"“ 一 图 胜 千 
言 ” 这 和 句 话 也 适用 于 应 用 状态 。UML 可 以 解决 这 个 问题 ， 不 过 这 需要 开发 者 付出 额外 的 精力 来 
绘制 所 有 的 状态 图 。 

这 种 情况 下 ， 当 应 用 状态 变 得 太 过 复杂 时 ,很 有 必要 看 清 它 的 全 貌 ， 此 时 有 限 状 态 机 
( https://en.wikipedia.org/wiki/Finite-state_machine ) 对 状态 管理 很 有 帮助 。 它 是 一 种 用 于 设计 计算 
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机 程序 的 数学 模型 。 我 们 可 以 把 应 用 表示 成 状态 的 集合 , 在 不 同 状态 之 间 进 行 转移 。 应 用 把 收 到 
的 事件 发 送 给 状态 机 ,然后 就 会 根据 状态 流 来 自动 计算 应 用 状态 。 这 样 一 来 ， 上 述 代码 就 会 变 成 
一 个 仅 有 的 可 观察 模型 this.state( 它 会 在 收 到 应 用 事件 之 后 改变 )。 以 下 是 一 个 简单 状态 机 的 
示例 。 












































进入 动作 





编译 器 、 解 析 器 以 及 词法 分 析 器 内 都 广泛 使 用 了 状态 机 。 不 过 在 开始 实现 应 用 的 状态 机 之 前 ， 
先 来 研究 一 下 这 种 方法 是 否 完全 没有 问题 。 遗 憾 的 是 ,经 典 状 态 机 的 用 途 相当 有 限 ， 而 且 对 复杂 
应 用 来 说 不 太 可 用 。 它 存在 以 下 问题 。 



































(1) 经 典 状 态 机 的 状态 不 能 包含 自身 数据 ( 模型 ). 不 可 能 把 所 有 应 用 状态 都 描述 成 状态 集合 ， 
应 用 状态 包含 了 大 量 数据 ， 比 如 我 们 的 消息 应 用 中 就 有 用 户 和 凭据、 聊天 列表 等 数据 。 另 外 , 事件 








也 能 包含 数据 ( 比如 Login 事 件 的 用 户 和 凭据 数据 )。 

(2) 不 能 定义 通用 的 事件 处 理 函 数 。 假设 我 们 需要 定义 一 些 disconnect 处 理 孔 数 , 或 者 为 一 些 
连接 成 功 的 状态 (应 用 在 线 时 的 所 有 状态 ) 定义 类 似 行为 ， 这 样 在 disconnected 事 件 后 它们 应 当 
转换 成 Disconnected 状 态 。 如 果 使 用 经 典 状态 机 ， 那 么 你 得 为 所 有 连接 成 功 的 状态 定义 一 个 
disconnected 转 换行 为 ， 使 其 转换 为 Ditsconnected 状 态 。 然 而 这 种 做 法 不 可 用 ， 还 包含 大 量 宛 余 
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代码 。 再 者 ,这 样 还 无 法 扩展 。 要 是 以 后 需要 在 其 他 状态 下 人 处理 连接 断 开 操 作 该 怎么 办 ?分 层 状 
态 机 ( hierarchical state machine，HSM ) 很 好 地 解决 了 这 个 问题 。 它 允许 定义 应 用 状态 的 层级 ， 
并 且 祖 先 层 级 可 以 为 所 有 子 层级 处 理 某 些 通用 事件 〈 比如 前 面 例子 中 的 disconnected 事 件 )。 

(3) 经 典 状态 机 的 另 一 个 问题 在 于 无 法 同时 处 理 多 个 状态 。 假 设 应 用 需要 接收 一 条 即将 到 来 
的 消息 , 并 在 对 其 进行 处 理 后 添加 到 模型 中 。 但 应 用 此 时 可 能 处 于 其 他 状态 , 并 且 不 能 在 消息 处 
理 过 程 中 离开 当前 状态 。 你 应 该 把 这 类 互 不 相关 状态 的 全 部 有 效 组 合 定义 成 另外 的 应 用 状态 , 这 
样 在 经 典 状 态 机 的 情况 下 状态 数量 将 成 倍增 加 ! 并 行 状态 很 好 地 解决 了 这 个 问题 , 你 可 以 把 某 些 
状态 定义 成 并 行 的 ， 这 样 它们 就 可 以 同时 被 激活 。 

(4) 经 典 状 态 机 的 问题 还 在 于 它们 无 法 在 每 次 转换 后 记 住 最 初 状态 ( 即 跟踪 状态 历史 )。 假 设 
你 想 要 实现 某 些 错误 处 理 程序 ， 比 如 显示 应 用 弹 窗 ,记录 错误 信息 并 将 其 发 送 给 服务 端 ， 再 返回 
到 应 用 最 初 的 状态 。 用 经 典 状 态 机 该 怎么 解决 这 种 情况 ?你 需要 为 每 个 应 用 状态 定义 独立 的 “ 错 
误 处 理 ” 状 态 。 

20 世 纪 80 年 代 ，David Harel 提 出 的 状态 图 (statechart， 现 已 成 为 UML 规 范 的 一 部 分 ) 解决 了 
上 述 问题 。 状 态 图 可 扩展 标记 语言 ( State Chart extensible Markup Language，SCXML ， 参 考 网 址 为 
https://www.w3.org/TR/scxml/ ) 是 一 门 XML 语 言 ， 它 以 Harel 状 态 图 为 基础 ， 提 供 了 基于 通用 状态 
机 的 执行 环境 。 它 的 标准 经 过 W3C 认 证 ， 并 人 允许 用 XML 文件 来 描述 全 部 状态 。SCXML 非常 灵活 ， 
可 以 像 定义 条 件 转换 过 程 一 样 定义 复合 与 并 行 的 状态 ( 因此 已 登录 状态 就 负责 处 理 连 接 断 开 事件 ， 
并 把 断 开 错 误 信 息 显示 给 用 户 ， 所 有 已 登录 状态 下 显示 的 UI 界面 可 以 继承 它 ， 并 且 无 需 关 心 该 事 
件 )。 每 个 状态 可 以 拥有 可 执行 的 onEntry 与 onExit， 转 换 过 程 也 能 拥有 这 种 自 定义 action。 


以 下 状态 图 描述 了 秒表 的 行为 。 



































































































































SCXML 







watch.reset 





Watch.start watch.stop 
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描述 此 图 中 转换 过 程 的 SCXML 文 件 如 下 所 示 。 


<?xml version="1.0" encoding="UTF-8"?> 
<SCXmL xmlns="http://www.w3.0rg/2005/07/scxml" 
version="1.0" initial="ready"> 
<state id="ready"> 
<transition event="watch.start" target="running"/> 
</state> 
<state id="running"> 
<transition event="watch.split" target="paused"/> 
<transition event="watch.stop" target="stopped"/> 
</state> 
<state id="paused"> 
<transition event="watch.unsplit" target="running"/> 
<transition event="watch.stop" target="stopped"/> 
</state> 
<state id="stopped"> 
<transition event="watch.reset" target="ready" /> 
</state> 
</scxml> 


( Apache 许 可 ， 请 参见 网 页 http://commons.apache.org/proper/commons-scxml/usecases/scxml- 
stopwatch.html。) 


有 很 多 JavaScript 状 态 机 框架 ， 最 出 名 的 就 是 Machina.js ( http://machina-js.org/ ) 与 JavaScript 
State Machine (已 过 时 ， 网 址 为 http://codeincomplete.com/posts/javascript-state-machine-v2-3-0/ )。 
machina-js 支 持 分 层 状态 ,但 不 支持 并 行 与 历史 记录 (不 支持 SCXML )。 另 外 ， 它 也 不 能 可 视 化 
状态 流 ( 显示 为 状态 图 )。 

幸运 的 是 ，SCXML 有 JavaScript 的 实现 ， 即 scxml ( SCION ， 网 址 为 https://www.npmijs.com/ 
package/scxml )。SCION 2.0 是 一 个 轻 量 级 SCXML 转 JavaScript 编 译 器 ， 面 向 以 SCION 为 核心 的 状 
态 图 解析 器 。 它 目前 只 支持 Nodejs 和 浏览 器 , 未 来 会 提供 对 Rhino 以 及 其 他 JavaScript 环 境 的 支持 。 

SCION 自 动 生成 的 代码 不 是 ES6 风 格 ， 而 且 没 有 Flow 的 严格 类 型 检查 注释 ， 因 此 我 们 开发 了 
Statem ( https://github.com/aksonov/statem ): 由 ES6 + Flow + MobX 驱 动 的 代码 生成 器 ， 让 你 可 以 
轻松 访问 所 有 状态 〈 通过 简单 的 statem.yourState 语 句 )， 而 且 状 态 是 完全 响应 式 的 。 


我 们 使 用 SCXML 的 GUI 编辑 器 scxmlgui ( https://github.com/fmorbini/scxmlgui ) 可 视 化 和 编辑 
应 用 的 状态 图 。 它 能 够 操作 SCXML 文 件 ,并 允许 导出 成 SVG/PNG/DOT 等 多 种 格式 。 当 然 你 也 可 
以 手动 编辑 8CXML 文 件 ， 因 为 它 的 结构 非常 简单 明了 。 


以 下 是 我 们 的 应 用 状态 简化 版 ( 由 scxmlgui 编 辑 )。 
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SCXML 











LoadData 1 汉 PromoScene 
Connect 成 功 Register 连 问 断 开 


Connected 


成 功 












RegisterProfile 


Main 


Friends Messaging 





LoggedScene 


RequestRoster 
RequestArchive 


Friendsldle 
Messagingldle 


ey eceived 


MessageReceived 


PresenceReceived 




















如 图 , 你 可 以 看 到 复合 状态 ( Root 、Connected 和 Main ) 以 及 并 行 状态 ( LoggedScene、 Friends 
和 Messaging )。 


不 过 ， 怎 样 才能 把 应 用 逻辑 与 这 张 状 态 图 进行 连接 呢 ? 来 看 看 以 下 的 SCXML 文 件 。 
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<scxml name="TinyRobot" version="1.0"”XxmLns="http://www.w3.org/2005/107/ 
scxml"> 
<datamodel> 
<data expr="this.sm.storage" id="storage" /> 
<data expr="this.sm.xmpp" id="xmppStore"/> 
<data expr="this.sm.friend" id="friendStore"/> 
<data expr="this.sm.profile" id="profileStore"/> 
<data expr="this.sm.message" id="messageStore"/> 
<data expr="this.sm.model" id="model"/> 
</datamodel> 
<state id="Root" initial="LoadData"> 
<state id="LoadData"> 
<onentry> 
<promise>storage.load()</promise> 
</onentry> 
<transition cond="_event.data 
&amp;&amp;_event.data.user" event="success" target="Connect"/> 
<transition cond="!_event.data || 
!_event.data.user" event="success" target="PromoScene"/> 
<transition event="failure" target="PromoScene" /> 
</state> 
<state id="PromoScene"> 
<transition event="success" target="Register"/> 
</state> 
<state id="Register"> 
<onentry> 
<promise>xmppStore.register(_event.data.resource, 
_event.data.provider_data)</promise> 
</onentry> 
<transition event="success" target="Connect"/> 
</state> 
<state id="Connected" initial="LoadProfile"> 
<onentry> 
<on event="disconnect">xmppStore.disconnected</on> 
</onentry> 
<transition event="disconnect" target="PromoScene"/> 
<state id="Checkprofile"> 
<onentry> 
<assign expr="_event.data" location="model.profile"/> 
</onentry> 
<transition cond="!this.model.profile.handle" target="SignUpScene"/> 
<transition cond="this.model.profile.handle" target="Main"/> 
</state> 
<state id="SignUpScene"> 
<transition event="success" target="Registerprofile"/> 
</state> 
<state id="Registerprofile"> 
<onentry> 
<promise>xmppStore.update(_event.data)</promise> 
</onentry> 
<transition event="failure" target="SignUpScene"/> 
<transition event="success" target="LoadProfile"/> 
</state> 
<parallel id="Main"> 
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<state id="LoggedScene"/> 
<state id="Messaging" initial="RequestArchive"> 
<state id="RequestArchive"> 
<onentry> 
<on event="messageReceived">xmppStore.message</on> 
<script>messageStore.requestArchive()</script> 
</onentry> 
<transition target="MessagingIdle"/> 
</state> 
<state id="MessagingIdle"> 
<transition event="messageReceived" target="MessageReceived"/> 
</state> 
<state id="MessageReceived"> 
<onentry> 
<script>messageStore.receiveMessage(_event.data)</script> 
</onentry> 
<transition target="MessagingIdle"/> 
</state> 
</state> 
<state id="Friends" initial="RequestRoster"> 
<state id="RequestRoster"> 


<onentry> 
<promise>friendStore.requestRoster()</promise> 
</onentry> 
<transition target="FriendsIdle"/> 
</state> 


<state id="FriendsIdle"> 
<transition event="presenceReceived" target="PresenceReceived"/> 
</state> 
<state id="PresenceReceived"> 
<transition target="FriendsIdle"/> 
</state> 
</state> 
</parallel> 
<state id="LoadProfile"> 
<onentry> 
<assign expr="_event.data.host" location="model.server"/> 
<promise>profileStore.loadProfile(_event.data.user)</promise> 
</onentry> 
<transition event="success" target="CheckpProfile"/> 
</state> 
</state> 
<state id="Connect"> 
<onentry> 
<promise>xmppStore.connect(_event.data.user, 
_event.data.password, 
_event.data.host)</promise> 
<assign expr="_event.data.host" location="model.server"/> 
</onentry> 
<transition event="failure" target="PromoScene"/> 
<transition event="success" target="Connected"/> 
</state> 
</state> 
</scxml> 
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D this.sn 引 用 了 StateMachine 实 例 。 你 可 在 此 处 传人 所 有 store 或 数据 ， 以 及 自 定义 action。 
口 _event .data 是 SCXMEL 的 内 置 变 量 ， 包 含 了 转换 参数 。 

口 promise 和 on 是 Statem 提 供 的 SCXML 扩 展 。 它 们 允许 你 使 用 JavaScript 的 promise， 并 根据 
promise 的 结果 生成 success 或 failure 事 件 。 你 也 可 以 自行 定义 任何 其 他 的 action。 


如 何 才能 把 SCXML 集 成 到 React Native 应 用 中 呢 ? 


口 执行 npm i statem --save， 安 装 statem。 
口 执行 npm i watchman --save， 安 装 watchman。 
口 把 model.scxml 文 件 放 到 项 目 中 的 state 文 件 夹 下 ， 并 在 package.json 的 scripts 部 分 添加 以 下 
代码 。 
"watch": "./node_modules/watchman/watchman 
state/model.scxml 'npm run gen'", 


"gen": "node node modules/statem/src/parser.js 
state/model.scxml gen/state.js", 























之 后 运行 npm run watch。 
口 在 App.js 中 导入 生成 的 genstate.js， 创 建 状态 并 传人 所 有 store 以 及 可 选 的 自 定义 action。 


import createState from '../gen/state'; 
const statem = createState({...rootStore, ...customactions}); 

口 如 果 不 想 在 SCXML 文 件 内 调用 JavaScript 代 码 ， 也 可 以 按照 如 下 方式 为 每 个 状态 定义 
onEntry 和 onExit 方 法 。 


statem.stateId.onEntry = (_event)=>{...} 


需要 注意 的 是 ， 所 有 状态 的 ID 应 当 是 独一无二 的 ， 并 且 要 以 大 写字 母 开 头 〈 好 比 JavaScript 
的 类 ), 不 要 包含 空格 以 及 其 他 特殊 字符 (也 就 是 说 ， 须 为 有 效 的 JavaScript 标 识 符 )。 statem 会 把 
它们 全 都 添加 到 自己 的 实例 中 (实例 以 小 写字 母 开 头 )。 因 此 ， 如 果 你 有 一 个 名 为 Register 的 状 
态 卫 ,可 以 通过 statem.register 访 问 这 个 状态 的 数据 。 你 也 可 以 通过 import {RegisterState} from 
'../gen/state' 来 使 用 注册 的 生成 类 ， 这 样 可 以 用 Flow 进 行 严 格 类 型 检查 。 

口 把 statem 传 给 Router ( 如 果 用 到 了 RNRF 组 件 )， 或 者 直接 传 给 React Native 组 件 。 


<Router statem={statem}> 






























































</Router> 
口 在 组 件 内 ， 可 以 像 调 用 普通 的 JavaScript 方 法 一 样 ， 使 用 所 有 的 状态 转换 以 及 其 他 数据 。 
statem.success({resource: DeviceInfo.getUniqueID(), provider_data}) 


SMC (http://smc.sourceforge.net/ ) 是 另 一 个 SCXML 的 替代 方案 ， 它 按 自 己 的 格式 描述 应 用 
状态 流 ， 并 且 可 以 为 项 目 生 成 JavaScript 人 代码。 我们 选择 SCXML ， 因 为 它 是 W3C 认 证 的 标准 。 
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4.2.9 设计 模式 


如 果 想 要 开发 很 复杂 的 应 用 , 并 希望 方便 长 时 间 维护 , 这 种 情况 下 把 所 有 代码 拆 分 成 小 而 清 
晰 的 功能 块 就 显得 尤为 重要 了 。 每 个 类 只 应 负责 单一 类 型 的 操作 。 了 解 设 计 模 式 对 于 正确 拆 分 应 
用 非常 重要 。 我 们 的 应 用 包含 了 以 下 这 些 重要 的 设计 模式 。 
口 观察 者 模式 〈 啊 应 式 模型 ) 
口 工厂 方法 模式 〈 创建 store 的 领域 对 象 ) 
口 对 象 池 模 式 〈 绥 存 store 的 领域 对 象 来 节省 流量 与 时 间 ) 
口 单 例 模 式 〈 store 与 模型 ) 
口 控制 反 转 模式 ( 用 npm 提 供 的 constitute 组 件 来 管理 store 与 模型 的 依赖 ) 
口 备忘录 模式 ( 用 iOS 的 本 地 存储 或 Realm 持 久 化 应 用 状态 ) 
口 活跃 记录 模式 用 于 表示 应 用 的 Realm 模 型 实体 
口 策略 模式 〈 根据 环境 使 用 不 同 的 XMPP 连 接 算法 ) 
口 门面 模式 ( 用 于 简化 对 底层 导航 组 件 的 访问 ， 详 见 第 5 章 ) 
口 异步 xmpp 操 作 中 大 量 使 用 了 promise 以 及 async/await 












































4.2.10 ”应 用 架构 


TinyRobot 应 用 的 整体 架构 如 下 所 示 。 


口 model* : 可 观察 且 响 应 式 的 MobX 领 域 模型 类 ( Model )。 

口 model/Model.js: 顶级 模型 ,表示 全 局 应 用 状态 。 

口 stores/*: store 代 表 应 用 的 业务 逻辑 ， 通 常 是 一 系列 可 以 修改 Model 的 action 集 合 。 

口 stores/RootStore.js: 顶级 store， 包 含 其 他 所 有 store 和 顶级 Model。 

口 components/* : React Native 组 件 (view， 视 图 )， 观 察 模 型 变化 并 相应 地 重新 演 染 自 壬 。 

口 Appjs: 把 一 切 组 合 起 来 的 根 文 件 ， 定 义 所 有 导航 界面 ( 请 阅读 第 5 章 了 解 更 多 信息 ) 并 
巴 RootStore 实 例 传递 给 它们 (npm 模 块 constitute 用 来 方便 地 管理 store 依 赖 并 创建 store 
的 单 例 )。 
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4.3 导航 


导航 在 任何 移动 应 用 中 都 是 非常 重要 的 一 部 分 。 复杂 的 应 用 会 密集 地 使 用 导航 , 并 且 会 包含 
数 十 个 UI“ 界 面 ”( scene )， 因 此 正确 的 选择 非常 重要 。React Native 提 供 了 一 些 内 置 的 组 件 : 
NavigatorI0S、Navigator 以 及 ExperimentalNavigation。 男 外 本 节 也 会 对 几 个 最 流行 的 第 三 方 导 
航 组 件 进行 评价 。 
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4.3.1 NavigatorI0S 


它 对 iOS 原 生 的 UINavigationController 做 了 一 层 封装 。 它 的 扩展 性 很 有 限 , 而 且 React Native 
团队 不 提供 支持 。 然 而 , 它 可 以 为 应 用 提供 原生 的 过 渡 动 画 和 体验 ， 因 此 它 适合 那些 不 需要 自 定 
义 选 项 以 及 复杂 导航 的 小 型 应 用 

1. Navigator 

跨 平 台 的 纯 JavaScript 实 现 方案 拥有 更 多 的 自 定义 选项 ， 但 缺乏 原生 的 过 渡 “ 体 验 ”"， 开 发 者 
必须 调整 过 渡 动 画 ， 使 其 看 起 来 和 原生 的 很 接近 。 它 的 API 非 常 简单 ， 比 如 push/pop/reset 方 法 。 
然而 它 没有 完全 面向 “界面 "*， 也 就 是 说 开发 者 必须 在 push 方 法 内 定义 所 有 的 界面 属性 。 

2. ExNavigator 


ExponentJS 团 队 开发 的 第 三 方 组 件 ， 允 许 开发 者 在 独立 的 类 中 定义 “界面 "， 而 且 导 航 代 码 
比 Navigator 和 NavigatorI0S 的 更 清晰 。 














O 





























3. ExperimentalNavigation 


前 面 几 个 组 件 的 显著 缺点 就 是 命令 式 的 API 以 及 状态 化 机 制 ， 所 有 导航 状态 都 保存 在 这 些 组 
件 中 ， 状 态 的 访问 和 测试 都 很 困难 。React Native 团 队 开 发 的 最 新 ExperimentalNavigation API 引 
人 了 类 似 Redux 的 做 法 ， 所 有 导航 状态 都 保存 在 一 个 不 可 变 的 变量 中 ， 导 航 action 通 过 对 应 的 
reducer 改 变 状态 。 导 航 状态 变化 后 ，React Native 组 件 就 会 相应 地 改变 导航 界面 。 


4. React Native Router Flux 


上 述 所 有 组 件 的 API 都 各 不 相同 ， 因 此 开发 者 无 法 在 不 重 写 大 量 代码 的 前 提 下 在 它们 之 间 方 
便 地 切换 。 一 年 多 以 前 ， 只 有 Navigator 和 NavigatorI0S 可 以 用 ， 而 且 它 们 的 API 不 好 用 。 随 着 时 
间 的 推移 肯定 会 出 现 更 好 的 导航 组 件 ， 因 此 Pavlo Aksonov 通 过 实现 门面 模式 ( Facade Design 
Pattern ) 开发 了 React Native Router Flux( RNRF )。 这 个 包 在 已 有 的 导航 组 件 上 增加 了 额外 的 抽象 
层 ， 以 便 使 用 统一 的 语言 来 描述 应 用 界面 。RNRF 包 的 第 一 版 (vl.x ) 使 用 了 Navigator ， 第 二 版 
使 用 了 exNavigator ， 第 三 版 使 用 了 最 新 的 NavigationExperimental。 


iOS Storyboard 的 概念 展示 了 一 种 绝 佳 的 可 能 性 ， 可 以 在 一 个 地 方 查看 所 有 应 用 界面 ， 并 且 
它 很 适合 理解 应 用 架构 。RNRF 包 也 尝试 实现 同样 的 目的 。 导 航 状 态 可 以 表示 成 树 状 结构 ， 因 此 
最 佳 选择 就 是 使 用 JSX 语 法 。 


以 下 示例 展示 了 带 有 自 定义 导航 栏 与 标签 栏 的 三 个 界面 。 


<Router navBar={NavBar}> 
<Scene key="first" component={First} hideNavBar /> 
<Scene key="second" tabs={true}> 
<Scene key="tab1" component={Tab1} tabIcon={TabIcon}/> 
<Scene key="tab2" component={Tab2} tabIcon={TabIcon} rightButton= 
{RightButton}/> 
</Scene 
</Router> 
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首先 ， 整个 界面 隐藏 了 导航 栏 ， 并 显示 包含 两 个 标签 的 标签 栏 。 第 二 个 标签 还 包含 了 右 侧 导 
航 按钮 界面 的 具体 内 容 ( RightButton 组 件 )。 定 义 完整 个 界面 后 ， 就 可 以 调用 Action.tab1() 或 
Actions.tab2() 从 第 一 个 界面 切换 到 第 二 或 者 第 三 个 界面 。 

TinyRobot 应 用 使 用 了 React Native Router Flux 包 来 管理 导航 状态 , 因为 它 允 许 使 用 统一 的 语言 
来 描述 应 用 界面 以 及 路 由 ， 不 依赖 底层 的 导航 组 件 。RNRF 还 内 置 了 模 态 弹 窗 的 支持 ( 语法 一 致 ， 
比如 用 Actions.privacyNotes() 显 示 模 态 窗 ， 再 用 Actions.pop() 隐 藏 ， 这样 应 用 代码 就 不 需要 了 解 
实际 使 用 了 哪 种 弹 窗 组 件 )。 该 组 件 还 可 以 很 方便 地 集成 侧 边 菜单 这 种 自 定义 导航 容器 。 
























































4.3.2 ”注册 与 认证 流程 


几乎 所 有 应 用 都 使 用 典型 的 初始 导航 流程 , 即 启动 应 用 界面 等 待 所 有 数据 加 载 完毕 ， 如 果 不 
存在 (已 登录 ) 用 户 就 前 往 注册 /登录 界面 。 这 种 实现 过 程 有 些 麻 烦 ， 并 且 有 多 种 实现 方式 。 许 
多 开发 者 通过 命令 方式 来 实现 , 在 初始 组 件 的 componentDidMount 方 法 内 检查 应 用 状态 , 然后 调用 
Actions.login() 或 者 Actions.home() 这 样 的 方法 (也 可 以 push Navigator 的 API )。 不 过 ,很 有 必 
要 让 代码 延迟 执行 ， 以 便 让 React Native 完 全 演 染 UI。 

componentDidMount(){ 

if (!this.props.isLoggedIn){ 
setTimeout(()=>Actions. Login()); 


} elsef 
setTimeout(()=>Actions.home()); 






































} 

} 

上 面 的 代码 有 些 糟 糕 ， 调 用 setTimeout 显 得 不 够 优雅 ; 然而 更 大 的 问题 在 于 ， 业 务 逻 辑 放 到 
了 UI 里 面 ! 你 需要 为 其 他 设备 的 UI 组 件 复 制 这 段 逻 辑 ( 同样 的 界面 在 Android 和 iOS 上 可 能 会 不 
同 )。 这 段 代 码 属于 典型 的 业务 逻辑 部 分 ， 必 须 放 在 store 当 中 。 但 store 不 是 React 组 件 ， 那 么 要 怎 
样 在 store 里 调用 React 的 API 呢 ? 

NavigationExperimental 组 件 的 API 试 图 解决 这 个 问题 ， 把 管理 导航 状态 的 代码 从 React 组 件 
中 抽 离 。 然 而 ， 在 React Native 0.28 之 前 的 版 本 中 ， 它 的 onNavigate 方 法 仍然 和 React Native 耦 合 ， 
因此 不 可 能 在 React 之 外 的 store 中 使 用 它 。 最 近 的 一 些 改动 使 其 变 得 可 能 ， 不 过 这 项 技术 仍然 处 
于 实验 性 阶段 。 

相 比 之 下 ，RNRF 包 提供 了 响应 式 的 switch 界面 ， 以 内 部 的 TabBar 容 带 为 基础 ， 根 据 用 户 定 
义 的 setLector 函 数 来 切换 标签 。 这 样 就 可 以 把 Redux 或 MobX 管 理 的 应 用 状态 与 Switch 界面 进行 
connect， 接 着 在 模型 或 store 内 定义 业务 逻辑 。 


Modeljs 的 代码 如 下 。 


@computed get scene(): string { 
return this.currentState.name; 



































} 
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如 你 所 见 ， 这 里 的 逻辑 相当 复杂 : 4 个 UI 界 面 对 应 不 同 的 应 用 状态 ， 并 把 初始 应 用 界面 定义 
成 MobX 的 computed 值 。 这 样 允 许 你 考虑 到 大 量 不 同 的 场景 (无 网 络 连接 、 数 据 过 期 、 注 册 信息 
错误 或 不 完整 等 )。 

Appjs 中 RNRF 包 的 代码 如 下 所 示 。 


<Router> 
<Scene key="root" component={Switch} tabs={true} selector={({model})=>model.scene}> 
<Scene key="launch" component={Launch} hideNavBar/> 
<Scene key="promo" component={Promo} hideNavBar/> 
<Scene key="signUp" component={SignUp} hideNavBar/> 
<Scene key="logged" component={Drawer} open={false} SideMenu={SideMenuyu} > 

















</Scene> 
</Scene> 
</Router> 


这 是 完全 声明 式 的 做 法 ， 不 需要 告诉 应 用 如 何 控 制 流程 (if/then/else )， 只 需 描 述 要 完成 
什么 。 代 码 变 得 更 加 简洁 而 且 可 靠 。 举 例 来 说 ， 对 于 认证 失败 ， 会 话 过 期 或 者 注销 等 情况 ， 不 要 
想 着 进行 redirect 导 航 操 作 。 因 为 一 旦 store 修 改 了 model.error 或 model.connected 状 态 ，Switch 
与 响应 式 的 Model 就 会 自动 完成 这 个 过 程 。 



































4.3.3 完美 的 导航 


最 新 版 的 RNRF 包 仍然 有 一 些 缺 聊 。 它 重度 依赖 React Native， 而 且 不 允许 从 业务 逻辑 内 调用 
导航 action (React 所 提倡 的 不 可 知 论 )。 因 此 现在 不 能 在 store 中 调用 Actions.login() 了 。 男 外 ， 
因为 Actions 方 法 由 执行 环境 动态 生成 , 所 以 无 法 执行 严格 类 型 检查 , 并 且 任何 IDE 都 不 会 为 此 提 
供 自动 补 全 功能 的 支持 ， 于 是 就 很 容易 写 错 action 的 名 称 ， 比 如 把 Actions.signup 写 成 
Actions.signup， 而 且 只 有 在 执行 环境 中 才 会 发 现 这 个 错误 。RNRE 的 Scene 组 件 不 再 有 固定 的 
propTypes 集 合 ， 它 直接 把 所 有 属性 传 给 底层 的 Scene.component 实 例 。 最 终 表明 React 无 法 验证 传 
给 Scene 组 件 的 属性 的 正确 性 。 


如 此 看 来 ， 优 秀 的 导航 组 件 应 该 具备 以 下 两 个 特点 。 

(1) 把 action 的 定义 分 成 两 部 分 : 业务 逻辑 , 包含 清晰 导航 API 的 层次 树 ( 独立 于 React Native )。 

(2) 在 View 层 定义 action 与 视图 的 映射 (响应 式 )。 

要 描述 包括 导航 的 通用 应 用 流程 ，Harel 状 态 图 再 合适 不 过 。 因 此 ， 理 想 的 导航 组 件 会 根据 
当前 应 用 状态 创建 navigationstate ( 由 ExperimentalNavigation 的 API 提 供 支 持 )， 并 在 每 次 应 用 
状态 改变 后 使 用 statem.aLLStates (返回 应 用 所 有 激活 的 状态 ， 包 括 祖先 状态 ) 自动 改变 它 。 分 
层 状态 表示 常见 的 Navigation 栈 ， 并 行 状态 表示 标签 式 视图 ( RNRF 内 的 tabs 组 件 )。 

因此 我 们 建议 的 语法 如 下 所 示 。 


import createState from './gen/state'; 
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import {Modal, Scene, Router} from 'react-native-router-flux'; 
import {Launch} from './Launch'; 

import {ProfileDetails} from './ProfileDetails'; 

import {Login} from './Login'; 

import rootStore from '../store/RootStore'; 


export default class App extends React.Component { 
Constructor(props){ 
Super(props); 
this.statem = createState({...rootStore}); 
this. statem. start(); 


} 
render(){ 
return ( 
<Router statem={statem} > 
<Scene state={statem.modal} component={Modal}/> 
<Scene state={statem.profileDetail} 
component={item => <ProfileDetails item={item} /> 
title={item=>item.displayName} /> 
<Scene state={statem.launch} component={Launch} hideNavBar/> 
<Scene state={statem.login} component={Login} hideNavBar/> 
J a 其 他 
</Router> 
); 
} 
} 


如 你 所 见 ，React Native 的 代码 内 没有 树 状 ( 分 层 ) 结构 (使 用 当前 v3 版 本 的 RNRF )， 只 是 
把 state 映 射 到 View。Scene 拥 有 固定 的 propTypes 集 合 ( key 、component 、titte 、hideNavBar 、 
hideTabBar 和 navBar 等 )。 这 意味 着 所 有 界面 有 特定 的 UI 元 素 , 但 不 包括 特定 的 组 件 属性 。 它 们 通 
过 component 函 数 这 种 自然 而 然 的 形式 来 定义 ， 并 拥有 自动 补 全 和 严格 类 型 检查 等 特性 。 

这 一 步 之 后 ， 就 可 以 在 Login 视 图 内 调用 this.props.state.login(username，password) 这 样 
的 方法 了 。 它 会 从 当前 状态 发 起 login 转 换 过 程 。 应 用 状态 会 根据 状态 流程 而 改变 ， 接 着 React 
Router 会 自动 重新 构造 导航 树 并 演 染 下 一 个 界面 。 
































4.4 通信 


上 文 提 到 ， 我 们 选择 了 XMPP 作 为 应 用 通信 技术 。 遗 憾 的 是 ，React Native 没 有 为 XMPP 提 供 
任何 支持 。 因 此 ， 需 要 从 现 有 的 OS 原生 组 件 或 者 基于 浏览 器 的 方案 中 寻找 解决 办 法 。Robbie 
Hanson 开 发 了 优秀 的 OS 框架 XMPPFramework, 另外 Pavlo Aksonov 开 发 的 react-native-xmpp 可 以 
提供 React Native 与 10S 框 架 之 间 的 “桥接 器”。 


另 一 个 方案 便 是 采用 流行 的 Web XMPP 库 StropheJS ( http://strophe.im/strophejs/ )。 不 巧 的 是 ， 
这 个 库 重 度 依赖 浏览 器 的 DOM， 而 React Native 不 具备 DOM。 不 过 ， 可 以 在 NodeJS 环 境 下 使 用 
NPM 包 xmldom( https://github.com/jindw/xmldom ) 来 模拟 DOM。 经 过 一 些 调 整 和 修补 后 , StropheJS 
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可 以 在 React Native 环 境 中 运行 。 需 要 注意 的 是 ， 通 信 过 程 由 WebSockets ( React Native 原 生 支 持 ) 
完成 ， 因 为 StropheJS 基 于 Web， 不 像 XMPPFramework 那 样 可 以 直接 连接 。 





4.4.1 原生 vs. JavaScript 


选择 最 合适 的 方案 非常 重要 ， 因 此 需要 为 两 种 方案 进行 性 能 测试 : react-native-xmpp 与 
StropheJSs。 我 们 发 现 ， 在 iPhone Ss 上 ，JavaScrip 人 方案 比 iOS 原 生 桥接 器 慢 了 2~3 倍 。JavaScript 单 
线程 运行 ， 而 XMPPFramework 利 用 了 多 线程 。 因 此 TinyRobot 采 用 了 原生 方案 。 不 过 ， 在 NodeJS 
单元 测试 中 使 用 了 StropheJS (原生 方案 不 能 在 NodeJS 环 境 中 运行 )， 此 外 我 们 还 开发 了 通用 的 
XMPP 接 口 ， 原 生 和 JavaScript 方 案 都 遵循 这 个 接口 。 我 们 还 利用 了 很 实用 的 StropheJS 节 ( stanza ) 
构造 器 : $iq、$message 以 及 $presence, 用 于 创建 必需 的 XMPP 节 。 显然 , 这 些 节 在 传递 给 原生 iOS 


XMPP 框 架 之 前 会 被 序列 化 成 字符 串 。 
































4.4.2 ”函数 式 编程 


怎样 才能 把 回调 式 API 与 应 用 的 响应 式 代码 、 观 察 者 变量 以 及 可 观察 变量 相 结 合 ? 我 们 应 当 
极力 避免 “回调 地 狱 "， 这 种 使 用 回调 函数 的 糟糕 代码 不 够 清晰 ， 而 且 维 护 、 测 试 和 扩展 都 非常 
困难 。 

函数 式 编程 把 任何 数据 源 都 表示 成 事件 流 。 这 样 我 们 的 应 用 就 能 把 所 有 的 XMPP 事 件 表 示 成 
事件 源 。 创 建 事件 流 之 后 ， 应 用 就 能 进行 各 种 转换 操作 ， 比 如 把 XMPP 的 XML 广 <message> 转 换 
成 JION， 再 转换 成 Message 领 域 对 象 。TinyRobot 使 用 了 KefirJS ( https://rpominov.github.io/kefir/ ) 
来 实现 事件 流 。 

const message = Kefir.stream(emitter => 


this.provider .onMessage = 
message => emitter.emit(message)).log('message'); 




































































const iq = Kefir.stream(emitter => 
this.provider .onIQ = 
iq => emitter.emit(iq)).log('iq'); 


此 处 的 this.provider 就 是 StropheJS 或 者 OS 的 XMPP 实 现 方案 。 


XMPP 的 <iq> 节 表示 典型 的 请 求 /响应 场景 ,举例 来 说 ,应 用 发 送 请 求 获取 最 新 的 好 友 列 表 ( 名 
单 )， 服 务 端 返回 的 iq 节 response 就 会 包含 好 友 列 表 。 这 个 过 程 可 以 通过 JavaScript Promise 完 成 ， 
同时 过 滤 事 件 流 (数据 参数 为 StropheJS 的 $igq 方 法 创建 的 iq 节 实例 )。 


sendIQ(data) { 
const id = data.tree().getAttribute( 'id'); 
return new Promise((resolve, reject)=> { 
const stream = this.iq.filter(stanza => stanza.id == id); 
const callback = stanza => { 
stream.offValue(callback); 


























图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 








126 第 4 章 示例 应 用 : TinyRobot 





if (!stanza || stanza.type === "error '){ 
reject(stanza ? stanza.error : {text: 'error'}); 
} else{ 


resoLve(stanza) ; 


}; 
stream.onValue(callback); 
this.provider.sendIQ(data); 
]); 
} 


接 下 来 可 以 使 用 async 和 await 来 请 求 好 友 名 单 。 


@action async requestRoster(){ 
const iq = $iq({type: 'get', to: this.model.profile.user + '@' 
+ this.model.server}).c('query', {xmlns: NS}); 
try { 
const stanza = await this.xmpp.sendIQ(iq); 
// 处 理 stanza 
Let children = stanza.query.itenm; 
if (children && !Array.isArray(children)) { 
children = [children]; 








} 
// 处 理 children， 把 它们 添加 到 模型 里 
this.model.friends.add(this.process(children)); 
} catch (error){ 
// 处 理 错误 信息 
} 
如 你 所 见 ， 上 述 代 码 非常 清晰 ,不 包含 任何 回调 本数。 然而， 这 还 不 完全 是 函数 式 和 声明 式 
的 代码 ， 因 为 this.model.friends.add 是 命令 式 的 代码 。 这 样 做 的 原因 在 于 this.model.friends 
是 可 持久 化 的 模型 ， 它 有 不 同 的 数据 源 (XMPP/iOS storage/UI )。 当 然 ， 可 以 尝试 利用 merge、 
mapLatest 等 函数 式 操 作 符 进行 重 构 ， 但 这 样 做 会 导致 代码 变 得 不 够 清晰 且 更 难 维护 。 在 命令 式 
与 声明 式 的 编程 方式 之 间 找 到 正确 的 平衡 非常 重要 ; 核心 的 函数 式 程序 很 难 阅读 ， 这 也 是 引入 
async 与 命令 式 await 的 原因 。 它 们 都 可 以 用 函数 式 的 写法 代替 (promise )， 但 会 使 代码 的 可 读 性 


变 差 。 



























































4.4.3 ”用户 珊 面 


任何 消息 应 用 中 最 复杂 的 部 分 莫 过 于 实现 消息 对 话 框 的 UI。 其 中 存在 诸多 挑战 : 加载 先前 
的 消息 、 发 送 消息 失败 时 进行 重 试 、 灵 活 的 日 期 显示 ( 临近 日 期 的 消息 无 需 显示 具体 日 期 )、 接 
收 到 新 消息 时 自动 滚动 对 话 框 ， 等 等 。 调 研 了 已 有 的 解决 方案 之 后 ， 我 们 决定 使 用 第 三 方 开源 
组 件 react-native-gifted-messenger ( https://github.com/FaridSafi/react-native-gifted-chat ) 来 展现 
消息 UI。 

















图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 








Gifted Messenger Gifted Messenger 
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我 们 需要 提交 一 些 PR 来 加 强 它 的 定制 化 ， 以 便 为 所 有 UI 元 素 提 供 我 们 自己 的 UI 设计 。 这 些 
元 素 包 括 消息 “气泡 ”、 文 本 输入 元 素 以 及 用 户头 像 ， 不 过 这 总 比 从 头 开 发 一 个 这 样 的 组 件 好 多 
了 。 更 重要 的 是 ， 开 发 者 能 够 改善 已 上 有 的 组 件 ， 而 不 是 重 写 一 个 ， 这 样 人 人 都 能 受益 。 











4.5 ”位 置 


基于 位 置 的 应 用 很 大 程度 上 利用 了 设备 的 GPS 来 获取 位 置 数据 以 及 在 用 户 之 间 共 享 位 置 数 
据 。React Native 提 供 了 内 置 的 全 局 对 象 navigator ， 用 于 访问 用 户 的 位 置 数据 。 


observe(){ 
this. stop(); 
if (typeof navigator !== 'undefined'){ 
this.watch = navigator .geolocation.watchposition( 
this.updatePosition, ()=>{}, 




















{ 
enableHighAccuracy: true， 
timeout: 20000， 
maximumAge: 1000 

} 

); 
} 
} 


@action updatePosition(position) { 
if (this.model.profile){ 
this.model .profile.location = 
new Location(position.coords); 








} 
} 
注意 ， 有 必要 检查 typeof navigator !== 'undefined' ， 避 人 免 单 元 测试 过 程 (NodeJS 环 境 ) 
报错 。 


UI 


在 ReactNative 中 显示 地 图 , 有 三 个 最 常用 的 选择 : react-native-maps 组 件 ( https://github.com/ 
airbnb/react-native-maps ) 提 供 的 iOS 内 置地 图 .Google Maps, 以 及 MapBox( https:/www.mapbox.comy )。 
Google Maps 对 React Native 的 集成 不 够 成 熟 ( 再 者 ReactNativeGoogleMaps 组 件 早 就 过 时 了 ， 请 参 
考 网 页 https://github.com/peterprokop/ReactNativeGoogleMaps )。MapBox 通 过 React Native MapBox 
GL ( https://github.com/mapbox/react-native-mapbox-gl ) 提供 了 对 React Native 的 实验 性 支持 。 我 们 
决定 使 用 MapBox， 因 为 与 原生 iOS 地 图 相 比 ， 它 的 定制 化 程度 更 高 ， 不 过 以 后 可 能 会 发 生变 化 。 
恰当 地 设计 应 用 很 重要 ， 以 便 在 必要 时 能 够 替换 地 图 提供 商 〈 需要 应 用 策略 设计 模式 )。 
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4.6 部署 与 单元 测试 


应 用 稳定 且 能 正常 工作 ， 这 一 点 十 分 重要 。 另 一 个 问题 在 于 ， 你 有 时 需要 修改 应 用 ， 并 在 必 
要 时 进行 代码 重 构 ( 重复 代码 移 除 、 代 码 拆 分 等 ) 没有 自动 化 单元 测试 的 情况 下 不 可 能 进行 这 
项 工作 。 在 类 Flux 的 单 向 数据 流 架 构 下 ， 这 样 做 非常 简单 ， 可 以 按照 以 下 方式 来 测试 每 个 action。 
(1) 定义 你 想 要 的 全 局 模型 的 初始 状态 〈 在 before 代 码 块 内 )。 
(2) 执行 必要 的 store action 。 
(3) 把 全 局 模型 转换 成 纯 JavaScript 结 构 ( 如 果 使 用 领域 模型 对 象 ), 将 其 与 期 望 的 输出 进行 比 
较 ( 期望 发 生 改 变 的 action )。 你 可 能 想 要 检查 改变 的 模型 值 ， 但 这 种 情况 下 你 无 法 确定 action 没 
有 修改 期 望 之 外 的 其 他 东西 。 
异步 action 的 情况 会 更 加 复杂 。 这 种 情况 下 你 无 法 进行 第 3 步 。 幸 运 的 是 ，MobX 的 when 函 数 
可 以 很 容易 做 到 这 一 点 ( 这 里 使 用 Mocha 作 为 测试 容器 ，step 插 件 用 来 进行 有 序 测试 )。 
step("register/login", function(done){ 
const register = testDataNew(11); 
profile.register(register.resource, register.provider data); 
when(()=>model.profile && model.connected && model.server, done); 
}); 
上 述 代 码 非 常 简洁 而 且 易 读 。when 隐 数 在 第 一 个 函数 参数 返回 true 的 情况 下 会 执行 第 二 个 函 
数 参 数 ( 也 就 是 响应 式 模型 相应 地 发 生变 化 时 )。 如 果 需 要 对 模型 进行 额外 的 检查 ， 可 以 在 调用 
done() 之 前 进行 。 
when(()=>model.profile && modeL.connected && model.server, 
1 在 此 处 验证 模型 是 否 正 确 
done(); 
]); 
另外 ， 要 始终 牢记 单元 测试 在 NodeJS 环 境 中 运行 ， 而 不 是 在 React Native 中 运行 。 因 此 你 需 
要 模拟 用 到 的 所 有 React Native 的 特定 组 件 ， 或 者 检查 typeof(nativeComponent) === undefined 以 
避免 报错 。 

































































4.6.1 React Native 组 件 测试 
与 测试 React 组 件 的 方法 类 似 ， 只 需 传 人 一 些 数据 作为 组 件 属 性 ， 接 着 观察 它 如 何 泻 染 。 
AirBnb 开 发 的 enzyme (http:/airbnb.io/enzyme/ ) 可 以 很 方便 地 测试 React Native 组 件 。 


import React from 'react'; 
import { mount, shallow } from 'enzyme'; 





describe('<Foo />', () => { 


it('calls componentDidMount', () => { 
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const wrapper = mount(<Foo />); 


expect(Foo.prototype.componentDidMount.calledOnce).to.equal(true); 


}); 
}); 


4.6.2 UI 测试 


XCode 7 提供 了 一 种 新 的 测试 应 用 的 方式 :UT 测试 。 它 可 以 通过 编程 的 方式 (用 Swift 语言 
模拟 所 有 用 户 行为 。UI 测 试 过 程 中 可 以 点 击 元 素 、 深 动 、 轻 扫 、 在 文本 框 中 输入 数据 ， 以 及 执行 
其 他 任何 用 户 行为 。 这 种 方式 可 以 很 好 地 自动 测试 整个 应 用 (不 像 单 元 测试 只 能 测试 单个 组 件 )， 
避免 出 现 React Native 的 “红色 警告 界面 "。 当 某 个 地 方 出 错时 ， 比 如 没有 正确 导入 某 些 模块 ,或 
者 XCode 没 有 添加 某 些 原生 iOS React Native 模 块 时 ， 就 会 出 现 类 似 以 下 例子 中 的 红色 警告 界面 ， 




















因为 开发 者 忘 了 在 XCode 工 程 中 添加 某 个 库 。 
施 UI 测试 来 履 盖 所 有 UI 界面 。 

















单元 测试 无 法 保证 应 用 能 够 正常 运行 ， 需要 实 


Missing Realm constructor - please ensure 
RealmReact framework is included! 


<Unknown> 


loadModuleImplementation 


guardedLoadModule 


_require 


<Unknown> 


loadModuleImplementation 


guardedLoadModule 
_require 


<unknown> 


loadModuleImplementation 


guardedLoadModule 
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以 下 示例 展示 了 我 们 的 简单 UI 测 试 ， 按 以 下 步 又 进行 。 
(1) 期 望 promo 页 面 显 示 Sign In 按钮 。 

(2) 注册 测试 用 户 ， 输 入 用 户 名 〈handle )、 名 字 和 姓氏 。 
(3) 前 往 消息 界面 。 

(4) 前 往 我 的 账户 界面 。 

(5) 滚动 到 底部 ， 点 击 Logout ( 注销 ) 按钮 。 


class ChatUITests: XCTestCase { 





override func setUp() { 
super .setUp() 
continueAfterFailure = false 
Let app = XCUIApplication() 
app. LaunchEnvironment["TESTING"] = "1"; 
app. Launch() 
} 


func waitForELementAndTap(eLement: XCUIELement， 
timeout: NSTimeInterval = 50) { 
expectationForpredicate(NSPredicate(format: "exists == true"), 
evaluatedWithObject: element, handler: nil) 

waitForExpectationsWithTimeout(timeout, handler: nil) 
XxCTAssert(element .exists) 
element. tap() 

} 


func testSignIn() { 
Let app = XCUIApplication() 
waitForELementAndTap(app.otherELements["” Sign In"], timeout: 500) 
Let Username = app.textFields["handle"] 
waitForELementAndTap(username) 
username.typeText("testUser1") 


Let firstName = app.textFields["firstName"] 
waitForELementAndTap(firstName) 
firstName.typeText("John") 





Let LastName = app.textFields["lastName"] 
waitForELementAndTap( lastName) 

lastName. typeText("Smith") 
waitForElLementAndTap(app.otherElements[" Continue"]) 


Let rightNav = app.otherElements["rightNavButton"] 
waitForELementAndTap(rightNav) 


let messagesTitle = app.staticTexts["Messages"] 
waitForElLementAndTap(messagesTitle) 


Let LeftNav = app.otherElements["leftNavButton"] 
waitForELementAndTap( LeftNav) 
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Let profileBtn = app.otherElements["myAccountMenuItem"] 
waitForElementAndTap(profileBtn) 


let title = app.staticTexts["My Account"] 
waitForElementAndTap(title) 


Let myAccount = app.otherElements["myAccount"] 
waitForELementAndTap(myAccount) 


Let Logout = app.otherElements[" Logout"] 
XCTAssert(Logout .exists) 
myAccount.scrollUpUntilVisible(logout); 
Logout. tap() 


} 

这 个 测试 很 简单 ， 因 为 它 没有 验证 UI 界面 的 内 容 ， 只 验证 了 界面 标题 以 及 按钮 是 否 出 现 。 这 
就 足够 了 ， 因 为 你 可 以 通过 单元 测试 来 测试 React Native 组 件 。 

UI 测试 应 该 不 会 影响 生产 环境 数据 库 , 但 怎样 用 真正 的 应 用 来 测试 数据 库 呢 ”可 以 通过 设置 
LaunchEnvironment 属 性 来 实现 。 


























app. LaunchEnvironment["TESTING"] = "1" 


然后 在 React Native 代 码 内 进行 如 下 修改 。 


export default class App extends React.Component { 
Constructor(props){ 
Super(props); 
settings.isTesting = props.TESTING != undefined; 
} 


接 下 来 React 组 件 就 会 通过 settings.isTesting 来 判断 当前 是 否 在 进行 UI 测试 。 如 果 
setting.isTesting 为 true，XMPP store 就 会 连接 测试 环境 服务 器 ， 而 不 是 生产 环境 。 

在 React Native 组 件 内 ， 必 须 使 用 testID 属 性 来 设置 专门 的 ID ， 供 UI 测 试 使 用 。 另 一 种 获 
取 React Native Buttons 组 件 的 方式 就 是 使 用 它们 的 文本 值 ( Continue 、Sign In、Logout )， 以 空格 
开头 。 


























4.6.3 ”快速 更 新 应 用 
复杂 的 应 用 改动 很 频繁 ， 而且 其 至 有 了 单元 测试 和 UI 测试 后 ， 仍 然 会 出 现 致 命 bug。React 
Native 人 允许 你 无 需 等 待 AppStore 的 审核 ， 就 可 以 远程 发 布 应 用 的 改动 。 很 多 组 件 都 可 用 于 完成 这 
个 目的 ， 比 如 CodePush ( https://microsoft.github.io/code-push/ ) 或 AppHub.io ( https://apphub.io/ )。 
这 种 机 制 并 不 复杂 , 就 是 从 服务 端 把 JavaScript 文 件 包 复制 到 应 用 中 , 因此 我 们 决定 实现 一 个 
更 灵活 的 解决 方案 。 我 们 加 入 了 打包 签名 、 压 缩 还 有 数据 加 密 以 提供 更 好 的 安全 性 。 
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这 个 过 程 中 最 重要 的 部 分 在 于 恰当 地 管理 应 用 版 本 。 如 果 你 添加 了 某 些 iOS 原 生 组 件 ， 或 者 
升级 到 新 的 React Native 版 本 ， 那 么 你 就 不 能 为 旧版 应 用 发 布 JavaScript 文 件 包 。 





4.6.4 版 本 控制 系统 


使 用 版 本 控制 系统 是 合作 开发 成 功 的 必要 条 件 。 我 们 使 用 Git， 并 把 Github.com 作 为 Git 托 管 
服务 。 











4.6.5 ”持续 部 署 


在 当前 Git 仓 库 的 主 分支 上 始终 保存 稳定 日 测试 过 的 应 用 非常 重要 。 有 了 持续 部 署 系统 ， 找 
到 导致 应 用 月 演 的 代码 就 变 得 很 简单 ( 当 某 些 自动 化 测试 失败 时 )。 并 且 这 类 系统 不 仅仅 能 够 运 
行 测试 ， 还 可 以 编译 应 用 并 将 应 用 部 署 到 iTunesConnect Testflight 服 务 。 我 们 使 用 Bitrise.io 
( http://bitrise.io/ ) 作为 部 署 服务 器 。 

















4.7 总 结 


我 们 希望 通过 本 章 对 采用 React Native 开 发 TinyRobot 应 用 的 讨论 ， 可 以 帮助 你 在 开发 自己 的 
应 用 时 有 一 个 清晰 的 思路 。 
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如 果 还 没 坏 ， 就 别 急 着 修复 它 。 


管理 移动 开发 领域 十 分 困难 , 因此 有 了 React Native。 编 程 语言 有 很 多 种 : Objective-C、Swift、 
Java、C#， 还 有 Visual Basic。 未 来 几 年 内 这 个 名 单 上 还 会 出 现 更 多 的 语言 ， 可 是 谁 能 知道 未 来 是 
什么 样 的 呢 ?” 有 些 人 可 能 会 问 ， 为 什么 要 用 男 一 门 语言 ? 我 真 的 也 要 用 JavaScript 来 开发 移动 应 
用 吗 ? 

之 前 解释 过 ，React Native 为 开发 团队 带 来 了 显著 的 优势 。 使 用 React Native 能 够 联合 你 的 代 
码 库 ， 这 样 就 能 很 方便 地 进行 跨 平台 测试 、 维 护 和 改进 应 用 。React Native 还 有 一 致 性 这 一 特点 。 
用 React Native 开 发 的 应 用 可 以 为 不 同 平台 的 用 户 提供 一 致 的 体验 。 

React Native 统 一 了 视图 与 逻辑 代码 的 主要 部 分 ， 让 我 们 可 以 专注 思考 故障 分 析 策略 ， 让 应 
用 变 得 独特 而 有 创意 。React Native 和 React 之 间 的 紧密 关系 还 能 够 让 我 们 在 Web 应 用 和 原生 应 用 
之 间 维 护 共 同 的 范式 (Redux 和 无 状态 组 件 )。 虽然 Web 应 用 和 原生 应 用 之 间 并 未 共享 主要 的 视图 
代码 ， 但 无 需 切 换 编程 风格 能 让 我 们 保持 专注 。 

























































































5.1 何 为 Fixt 


Fixt 是 一 项 维修 平板 电脑 和 手机 的 贵宾 服务 。 我 们 的 产品 及 服务 对 普通 消费 者 免费 ， 只 对 企 
业 用 户 收费 。 你 可 以 从 https:/d.fixtco/ 下 载 我 们 的 iOS 或 Android 移 动 应 用 。 我 们 提供 的 平台 可 以 
让 用 户 报 告 设备 的 损坏 情况 ,并 尽快 对 故障 进行 维修 ,通常 当天 就 可 以 维修 好 设备 并 送 还 给 用 户 。 
我 们 甚至 可 以 让 维修 技术 人 员 前 往 机 场 ， 在 航班 之 间 维 修 空 中 乘务 员 的 手机 ! 

我 们 的 应 用 有 一 项 故障 分 析 的 功能 ， 利 用 React Native 的 原生 层 访 问 设备 的 传感器 ， 当 故障 
发 生 时 检测 到 它 。 接 着 根据 这 一 实时 信息 立刻 采取 措施 ， 确 保 用 户 能 得 到 快速 方便 的 维修 服务 。 
我 们 利用 与 全 世界 数 千 个 维修 店 的 合作 关系 来 帮助 用 户 ,， 为 他 们 找到 当地 最 具 性 价 比 的 选择 。 我 
们 与 维修 店 协调 以 确保 他 们 能 提供 客户 设备 所 需 的 零件 , 还 要 保证 他 们 能 按 客户 的 日 程 安排 完成 
维修 。 从 快速 响应 措施 到 保证 性 价 比 的 各 个 方面 ， 我 们 希望 尽 可 能 给 用 户 最 佳 的 维修 体验 。 
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选择 React Native 的 原因 在 于 , 它 允 许 我 们 为 OS 和 Android 平 台 的 客户 提供 无 颖 的 体验 。 它 还 
能 让 我 们 专注 于 特有 的 问题 集合 ， 而 不 用 管 那些 用 Objective-C 和 Java 所 开发 的 系统 的 复杂 之 处 。 
我 们 的 代码 库 之 间 共 享 UI 代 码 ， 只 有 故障 分 析 和 安全 过 程 需要 为 每 个 移动 平台 定制 。 对 小 型 团 
队 来 说 这 是 必 不 可 少 的 , 由 于 节省 了 时 间 和 精力 , 才能 够 维护 兼容 两 个 平台 的 应 用 以 及 一 些 内 部 
产品 。 
































5.2 故障 分 析 程 序 


人 们 认为 计算 机 可 以 防止 他 们 犯错 ， 他 们 错 了 。 有 了 计算 机 ， 你 犯错 会 更 快 。 
一 -Adam Osborne 


5.2.1 快速 分 析 与 急救 


Fixt 的 目的 之 一 就 是 设备 在 使 用 周期 内 出 现 问题 时 就 能 被 发 现 。 假 设 你 不 小 心 摔 了 一 下 手机 ， 
某 个 内 部 元 件 损坏 了 , 你 什么 时 候 能 发 现 ? 或 许 要 等 到 某 天 , 你 不 能 安全 连接 WiFi 以 接收 重要 邮 
件 ， 或 者 错过 潜在 雇主 的 电话 ， 你 才 会 意识 到 手机 二 了。 我 们 希望 防止 这 样 的 事 发 生 在 你 身上 。 
为 此 我 们 先 要 识别 你 的 设备 ， 以 便 根 据 它 的 型 号 来 为 你 提供 定制 的 体验 。 基 本 的 故障 检测 之 后 ， 
还 需要 深入 检查 设备 更 具体 的 特性 ， 为 你 带 来 完全 定制 化 的 体验 。 























5.2.2 Platfom 

React Native 提 供 了 一 些 工具 用 来 识别 所 运行 设备 的 常见 特性 。 Platform 工 具 包 含 了 一 些 非常 
基本 的 平台 信息 。React Native 文 档 中 相应 的 部 分 解释 了 它 一 般 用 于 设置 条 件 逻 辑 ， 以 便 实现 专 
门 在 iOS 或 Android 平 台 上 运行 的 代码 。 


import { Platform } from 'react-native'; 














// Android 平 台 

PLatform.0S // "android" 
Platform.Version // 返回 21 或 19 
// 10S 平 台 

PLatform.0S // "ios" 
Platform.Version // 未 定义 


PLatform 提 供 的 属性 对 极其 基础 的 分 析 来 说 够 用 了 ， 但 大 部 分 情况 下 它 无 法 帮 你 解决 更 深入 
的 问题 。 操 作 系统 信息 最 适用 于 一 般 的 情况 。 我 们 用 它 定制 任何 与 用 户 之 间 的 自动 交互 过 程 。 


render() { 
if (PLatform.0S === 'ios') { 
return ( <IosSpecificComponent/> ); 


5 
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return ( <AndroidSpecificComponent/> ); 


} 


Android 的 版 本 号 也 很 有 用 , 可 以 在 某 些 原生 API 不 可 用 的 情况 下 修改 应 用 行为 。 这 种 用 法 在 
React Native 自 身 的 代码 库 中 并 不 多 ， 不 过 在 自 定义 的 原生 模块 中 很 常见 ， 很 值得 关注 一 下 。 特 
别 需 要 指出 的 是 ， 发 布 到 Play Store 的 应 用 可 能 包含 错误 ， 这 会 让 特定 API 版 本 的 用 户 完全 无 法 使 
用 你 的 应 用 。Android 应 用 的 发 布 过 程 没 那么 严格 ， 因 此 你 需要 在 宣称 支持 的 所 有 Android 版 本 上 
进行 测试 ， 确 保 不 会 在 未 包含 某 些 后 续 版 本 原生 API 的 设备 上 使 用 这 些 API。 


render() { 

if (Platform.0S === 'android' && Platform.Version < 19) { 

return ( 

<Text> 

This is returned for any Android version below KitkKat 
</Text> 
); 
} 





























return ( <Text> Otherwise this is returned </Text> ); 


} 


Fixt 团 队 分 析 设备 问题 或 者 修复 bug 时 ， 需 要 操作 系统 和 Android 版 本 以 外 的 更 多 信息 。 所 幸 
React Native 提 供 了 另 一 个 有 用 的 模块 ，NetInfo。 





5.2.3 NetInfo 


NetInfo API 通 过 提供 详细 的 设备 网 络 状态 , 让 你 能 够 获取 关于 设备 环境 的 更 多 信息 。NetInfo 
在 iOS 和 Android 上 提供 的 功能 与 信息 ,详细 程度 不 一 致 ， 因 此 接 下 来 将 分 别 对 两 个 平台 的 情况 进 
行 介绍 。 

iOS 上 NetInfo 提 供 的 信息 不 太 多 。 尺 管 iOS 要 比 Android 更 早 开发 出 这 个 API， 它 一 直 都 只 有 
很 基础 的 功能 。 你 能 做 的 就 是 从 很 高 的 层面 上 获取 当前 网 络 状态 , 或 者 订阅 事件 监听 器 来 检测 网 
络 状 态 的 任何 变化 。 


import { NetInfo } from 'react-native'; 









































NetInfo.fetch().done((netState) => console.log(netState)); 


NetInfo.addEventListener('change', (netState) => console.log(netState)); 

这 两 个 方法 都 返回 数组 ['none' ，'wifi' ，'cell'，'unknown'] 中 的 一 个 值 。 重 要 的 是 ， 记 得 
注销 事件 监听 器 。 如 果 你 忘 了 这 样 做 ， 就 会 导致 用 户 的 电量 白白 浪费 , 这样 他 们 就 可 能 关闭 或 者 
印 载 你 的 应 用 。 

Android 平 台 的 NetInfo 实 现 提供 了 更 细 粒 度 的 网 络 信息 。 它 与 OS 平台 的 实现 提供 一 样 的 方 
法 ,但 返回 更 大 范围 的 状态 值 ( NONE 、BLUETOOTH 、DUMMY 、ETHERNET 、MOBILE 、MOBILE_DUN 、 
MOBILE_HIPRI 、MOBILE_MMS 、MOBILE_SUPL 、VPN、WIFI 、WIMAX 、UNKNOWN )。 这 些 值 提供 了 足够 的 
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细节 来 有 效 判 断 用 户 使 用 应 用 的 场景 ， 以 便 专 注解 决 可 能 出 现 的 特殊 网 络 连接 问题 。 


注意 : ReactNative 在 Android 上 对 NetInfo 的 实现 方式 没有 提供 所 有 可 能 的 网 络 类 型 ， 甚 至 可 
能 你 认为 很 活跃 的 某 种 状态 也 获取 不 到 。 我 们 在 尝试 检查 用 户 设备 是 否 处 于 VPN 网 络 时 遇 到 了 这 


个 问题 。 











我 们 使 用 一 台 连 接 WiFi 的 Android $.0 设 备 ， 同 时 连接 另 一 个 第 三 方 服务 应 用 启动 的 VPN， 这 
时 我 们 发 现 了 一 个 矛盾 。 网 络 连接 是 经 过 VPN 的 ， 但 获取 当前 网 络 状态 时 NetInfo 的 返回 值 却 是 
NIFI。 这 个 意料 之 外 的 行为 缘 于 Android 平 台 的 一 个 已 知 问题 ( https://issuetracker.google.com/ 
issues/37068179 )。 














private String getCurrentConnectionType() { 


try { 
NetworkInfo networkInfo = mConnectivityManager .getActiveNetworkInfo(); 
if (networkInfo == nuLL || !networkInfo.isConnected()) { 


return CONNECTION_TYPE_NONE; 

} else if (ConnectivityManager.isNetworkTypeValid(networkInfo.getType())) { 
return networkInfo.getTypeName().toUpperCase(); 

} else { 
return CONNECTION_TYPE_UNKNOWN; 


} catch (SecurityException e) { 
mNoNetworkPermission = true; 
return CONNECTION_TYPE_UNKNOWN; 

} 

} 


当 网 络 传 输 经 过 WiFi 下 的 VPN 时 ，NetInfo 返 回 WIFI， 这 是 因为 React Native 的 
NetInfoModule.java 文 件 中 的 getCurrentConnectionType 方 法 用 到 了 Android 的 ConnectivityManager 
来 获取 活跃 的 网 络 信息 。 设 备 既 连接 了 WiFi 又 使 用 了 VPN 的 情况 下 ， 用 getActiveNetworkInfo 查 
询 设备 ，ConnectivityManager 的 返回 值 为 WiFi 连 接 。 为 了 绕 过 这 个 问题 ， 我 们 实现 了 一 个 原生 
Android 方 法 isVpnActive 来 真正 地 检测 VPN 连 接 。 


@ReactMethod 
public void isVpnActive(Promise promise) { 
Network[] networks = mConnectivityManager .getAllNetworks(); 

















for (int i = 0; i < networks.Length; i++) { 
NetworkCapabilities capabilities 
= mConnectivityManager .getNetworkCapabilities(networks[i]); 


if (capabilities.hasTransport(NetworkCapabilities.TRANSPORT_VPN)) { 
promise.resolve(true); 
return; 
} 
} 


promise.resolve(false); 


3 
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让 





这 个 方法 利用 connectivityManager 获 取 设 备 所 处 的 所 有 网 络 。 接 着 检测 这 些 网 络 , 看 它们 是 
否 拥有 网 络 能 力 TRANSPORT_VPN。 如 果 某 个 网 络 有 这 个 能 力 ， 那 就 说 明 VPN 正 在 该 设备 上 运行 ， 
方法 返回 true。 反 之 ， 在 检查 每 个 网 络 后 返回 faLse。 

遗憾 的 是 , 这 样 无 法 保证 你 的 应 用 , 或 者 任何 其 他 应 用 , 在 这 种 情况 下 真 的 在 使 用 VPN 连 接 。 
很 可 能 VPN 只 是 用 来 管理 某 些 特殊 应 用 的 网 络 传输 。 如 果 你 靠 isvpnActive 方 法 来 确认 应 用 正 通 
过 VPN 进 行 连接 ， 可 能 会 得 到 错误 的 结果 。 

针对 这 种 情况 ， 更 好 的 解决 方案 是 利用 应 用 内 的 路 由 追踪 功能 ， 再 次 确认 VPN 的 使 用 情况 。 
这 样 做 比 起 在 原生 代码 内 检查 设备 网 络 要 慢 一 些 ,因为 你 会 遇 到 请 求 延 迟 , 尤其 是 如 果 用 户 处 于 
糟糕 的 网 络 环境 中 ,延迟 会 很 入。 因此 ,更 可 取 的 做 法 是 在 应 用 需要 结果 之 前 完成 这 类 请 求 。 或 
者 可 以 采取 另 一 种 方式 ，Netflix 似 乎 使 用 并 维护 着 一 个 已 知 的 VPN IP 地 址 列表 ( https:/www. 
howtogeek.com/239616/how-to-watch-netflix-hulu-and-more-through-a-vpn-without-being-blocked/ )。 
当 用 户 从 这 些 耻 地 址 向 你 发 送 数据 时 ， 你 就 可 以 确定 他 们 正在 使 用 VPN。 



















































































5.2.4 ”Fixt 的 设备 参数 模块 


我 们 在 Fixt 应 用 中 通过 调用 React Native 以 外 的 原生 设备 标识 模块 事先 对 设备 进行 识别 ， 然 后 
把 标识 信息 作为 常量 提供 给 JavaScript 层 , 这 样 应 用 就 能 访问 设备 信息 , 并 且 无 需 担心 调用 原生 层 
方法 耗费 的 时 间 。 我 们 的 团队 非常 认真 谨慎 ,， 和 希望 尽 可 能 为 用 户 带 来 流畅 的 应 用 体验 。 原 生 常 量 
帮助 我 们 实现 了 这 个 目标 , 因为 访问 它们 比 起 异步 调用 原生 层 方 法 快 了 很 多 。 当 确实 需要 进行 异 
步调 用 时 ， 我 们 保证 在 需要 之 前 完成 调用 ， 这 样 用 户 就 不 用 等 待 信息 返回 了 。 
我 们 开发 了 一 个 开源 模块 ， 提 供应 用 所 运行 设备 的 详细 信息 。react-native-device-specs 这 
个 包 的 用 途 相当 直截了当 ， 可 以 为 你 提供 三 个 关键 的 信息 : 运营 商 、 存 储 空间 ， 以 及 设备 型 号 / 


人 
口 o 


首先 , 该 包 提供 设备 平台 代码 。 这 是 唯一 标识 设备 的 一 个 字符 串 。 你 可 以 在 Google Play 支 持 
网 站 ( https://support.google.com/googleplay/answer/1727131?hl=en-GB ) 上 找到 Android 设 备 的 平台 
列表 ， 以 及 在 iPhone Wiki ( https://www.theiphonewiki.com/wiki/Models ) 上 找到 iOS 设 备 的 标识 符 
列表 。 通 过 这 个 代码 , 你 就 可 以 判断 用 户 使 用 哪个 型 号 的 设备 访问 你 的 应 用 。 这 种 绝 佳 的 方式 能 
够 收集 那些 影响 部 分 特定 用 户 的 特殊 bug。 你 还 可 以 利用 这 个 信息 来 弄 清 你 的 用 户 最 普遍 使 用 哪 
些 设备 ， 这 对 于 测试 新 的 应 用 布局 极 有 帮助 。 

React Native 设 备 参数 模块 还 提供 了 运营 商 信息 。 设 备 没有 SIM 卡 或 者 在 模拟 器 中 的 情况 下 ， 
返回 字符 串 'No Carrier' 。 你 可 以 通过 运营 商 信息 大 致 了 解 你 的 用 户 来 自 世 界 何 处 。 这 项 信息 还 
可 以 用 来 诊断 应 用 骨 泪 的 起 因 ， 如 果 错 误 影 响 特定 的 运营 商 或 者 那些 没有 SIM 卡 的 用 户 , 那么 运 
营 商 信息 就 必 不 可 少 了 。 

最 后 , 该 包 可 以 让 你 访问 设备 实际 的 存储 空间 。 这 与 广告 宣传 的 存储 空间 不 一 样 。 这 项 信息 
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不 是 一 个 整数 , 而 是 设备 上 可 用 存储 区 块 的 实际 数量 。 它 让 你 在 更 细 的 粒度 上 对 用 户 设备 有 所 了 
解 。 你 可 以 利用 这 项 信息 进行 目的 明确 的 广告 活动 或 者 下 载 建议 信息 , 并 针对 设备 存储 空间 比较 
特殊 的 用 户 提供 个 性 化 体验 。 

我 们 在 Fixt 应 用 中 利用 这 些 信息 来 检测 特定 设备 型 号 的 问题 。 某 些 情况 下 ， 这 可 以 帮 用 户 少 
去 一 次 维修 店 。 型 号 信息 也 让 我 们 了 解 到 特定 问题 影响 某 个 设备 的 频率 。 如 果 用 户 的 设备 无 法 维 
修 , 运营 商 和 存储 空间 信息 有 助 于 更 换 合 适 的 设备 。 通 过 编程 的 方式 收集 这 些 信 息 , 我 们 让 设备 
维修 变 得 像 点 一 个 按钮 那么 简单 。 

1. 实现 


该 包 的 JavaScript 层 代码 非常 直观 , 就 不 再 介绍 了 。 下 面 将 简要 概述 Objective-C 和 Java 的 代码 ， 
让 你 了 解 如 何 扩展 与 修改 这 类 包 。 


2. Objective-C 
从 一 个 很 简单 的 头 文件 开始 (RNDeviceSpecs.h )。 


// 导入 RCTBridgeModule 
#import "RCTBridgeModule.h" 
































// 设置 界面 

@interface RNDeviceSpecs : NSObject <RCTBridgeModule> 

@end 

接着 在 RNDeviceSpecs.m 文 件 中 通过 以 下 代码 创建 所 需 的 一 切 。 
// 导入 头 文件 


#import "RNDeviceSpecs.h" 
// 包含 sys 类 ， 用 于 访问 系统 
#include <sys/types.h> 
#include <sys/sysctl.h> 


// 还 需要 CoreTeLephony 类 
Qimport CoreTelephony; 


// 要 实现 的 内 容 


QimpLementation RNDeviceSpecs 


// 要 导出 的 React Native 模 块 
RCT_EXPORT_MODULE() 


// 方法 写 在 此 处 

Gend 

写 在 RCT_EXPORT_MODULE 中 的 第 一 个 方法 用 来 获取 设备 型 号 。 
- (NSString *)platform { 


size t size; 
sysctlbyname("hw.machine", NULL, &size, NULL, 0); 
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char *machine = malloc(size); 
sysctlbyname("hw.machine", machine, &size, NULL, 0); 


NSString *platform = [NSString stringWithUTF8String:machine]; 
free(machine); 
return platform; 


} 

该 方法 以 字符 串 形 式 返 回 平台 名 称 。 

头 两 行 代码 通过 sysctlbyname 方 法 访问 "hw.machine"， 返 回 完整 的 缓存 空间 。sysctlbyname 
方法 通过 字符 串 来 读 写 系统 信息 。 接 下 来 的 两 行 代码 为 size 变 量 分 配 数 个 字 节 的 内 存 , 并 用 它 来 


ee 
备 平台 (型 号 


下 一 个 方法 用 来 获取 设备 的 运营 商 信息 。 


- (NSString *) carrier { 
CTTeLephonyNetworkInfo *netinfo = [[CTTeLephonyNetworkInfo alloc] init]; 
CTCarrier *carrier = [netinfo subscriberCellularProvider]; 
NSString *carrierName = carrier.carrierName; 
if (carrierName == nil) { 
carrierName = @"No Carrier"; 











} 


return carrierName; 


} 


该 方法 以 字符 串 形 式 返回 设备 的 运营 商 名 称 。 开 始 先 初始 化 CTTeLephonyNetworkInfo 类 的 实 
例 。 接 着 用 这 个 实例 通过 subscriberCeLLuLarProvider 方 法 获取 CTCarrier 对 象 。 从 这 个 对 象 中 就 
可 以 直接 获取 到 carrierName 并 返回 它 。 唯 一 的 问题 在 于 运营 商 名 称 可 能 不 存在 (平板 或 者 无 可 
用 SIM 卡 的 手机 会 有 这 种 情况 )， 这 种 情况 下 我 们 把 carrierName 设 置 成 "No Carrier"。 


最 后 一 个 方法 用 来 获取 设备 的 存储 空间 大 小 。 我 们 使 用 NSsearchPathForDirectoriesInDomains 
获取 设备 的 目录 路 径 ， 接 着 通过 NSFiLeManager 获 取 这 些 路 径 的 属性 。 这 样 就 可 以 很 容易 地 取得 
以 字 节 为 单位 的 文件 系统 大 小 , 再 进行 一 些 基 本 计算 就 可 以 把 单位 转换 成 千 兆 。 这样 可 以 很 好 地 
大 致 估算 广告 所 宣传 的 存储 空间 。 后 面 会 稍微 介绍 怎样 计算 这 个 值 。 


- (NSInteger) totalDiskSpace { 

NSNumber *fileSystemSizeInBytes = 0; 

NSInteger fileSystemSizeInGBytes = 0; 

NSError *error = nil; 

NSArray *paths = NSSearchpathForDirectoriesInDomains(NSDocumentDirectory, 
NSUserDomainMask, YES); 

NSDictionary *dictionary = [[NSFileManager defauLtManager] attributesOf- 
FiLeSystemForPath:[paths lastObject] error: &error]; 



































| 


























if (dictionary) { 
fileSystemSizeInBytes = [dictionary objectForKey: NSFileSystemSizel]; 
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fileSystemSizeInGBytes = [@([fileSystemSizeInBytes floatValue] / 1E 
+9) integerValuel]; 
} else { 
NSLog(@"Error Obtaining Disk Memory: Domain = %@, Code = %@", [error 
domain], [error codel]); 


} 


return fileSystemSizeInGBytes; 





最 后 ， 封 装 一 个 方法 用 来 调用 上 述 的 所 有 方法 ， 然 后 返回 一 个 常量 对 象 。 


- (NSDictionary *)constantsToExport 


{ 
return @{@"platform": [self platform], @"carrier": [self carrier], @"disk- 

Space": [NSNumber numberWithInt:[self totalDiskSpacel]]}; 

} 

如 你 所 见 ， 访问 基 本 的 原生 iOS 设 备 信息 一 般 来 说 很 简单 。 通 过 获取 用 户 设 备 上 的 此 类 信息 ， 
就 能 更 方便 地 为 用 户 提供 一 致 的 体验 。React Native 所 提供 的 设备 信息 对 于 定制 JavaScript 代 码 来 说 
足够 了 , 但 是 定位 那些 影响 一 小 部 分 用 户 的 错误 时 , 具体 设备 环境 的 附加 信息 就 显得 至 关 重 要 了 。 

如 果 你 使 用 Redux 并 且 追 踪 action 记 录 , 拥有 设备 信息 以 及 系统 版 本 号 就 可 以 非常 容易 地 复 现 
用 户 的 操作 流程 。 据 我 所 知 , 我 的 团队 曾 遇 到 一 些 非常 特殊 的 问题 , 特别 是 发 布 新 的 软件 更 新 时 。 
拥有 用 户 设备 的 参数 可 以 让 我 们 复制 用 户 的 环境 。 这 样 就 十 分 便于 分 析 并 修复 这 些 问 题 。 

希望 你 已 经 可 以 独立 解决 这 些 问题 ， 并 开始 自己 查阅 iOS 文 档 。 文 档 中 有 大 量 非 常 特殊 的 方 
法 , 访问 它们 是 一 种 在 现实 场景 中 监控 应 用 的 绝 佳 方式 , 这 样 就 能 确保 用 户 在 每 台 设 备 上 都 能 享 
受到 一 致 、 流 畅 和 原生 的 体验 。 

3. Android 


该 包 的 Android 部 分 和 iOS 部 分 有 一 样 的 方法 。 不 管 你 用 的 是 Android 还 是 iOS 平 台 ， 我 们 都 努 
力 让 JavaScript 层 能 够 很 方便 地 访问 这 个 包 。 关 于 创建 文件 来 扩展 ReactPackage 类 的 方式 没有 什么 
好 介绍 的 ， 因 此 接 下 来 就 直接 跳 到 该 模块 更 独特 的 代码 部 分 。 

@Override 


public Map<String, Object> getConstants() { 
final Map<String, Object> constants = new HashMap<>(); 

























































































String platform = Build.MODEL; 
constants.put("platform", platform); 


ReactContext reactContext = (ReactContext)getReactApplicationContext(); 
TelephonyManager manager = (TelephonyManager)reactContext.getSystemService 
(Context.TELEPHONY_SERVICE); 

String carrier = manager .getNetworkOperatorName(); 
constants.put("carrier", carrier); 


String diskSpace = bytesToHuman(totalMemory()); 
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constants.put("diskSpace", diskSpace); 
return constants; 
} 
如 你 所 见 ,Android 平 台 上 访问 设备 参数 也 很 简单 , 头 几 行 代码 初始 化 了 常量 Map, 然 后 从 Build 
类 中 获取 设备 型 号 。 接 着 取 到 React 应 用 的 执行 环境 ， 用 它 访问 TelephonyManager 类 的 实例 。 通 过 
该 实例 取得 运营 商 名 称 。 最 后 用 了 几 个 私有 方法 。 这 里 将 着 重 介 绍 最 有 趣 的 totaLMemory 方 法 。 
如 果 你 对 bytesToHuman 方 法 很 感 兴趣 ， 可 以 在 Fixt 的 react-native-device-specs 仓 库 中 查看 它 的 
源码 。 
private Long totalMemory(){ 
StatFs statFs = new StatFs(Environment.getExternalStorageDirectory().getPpath()); 
Long total = (statFs.getBlockCountLong() * statFs.getBlockSizeLong()); 
return total; 
} 
这 里 用 到 了 Android 代 码 库 里 的 Environment 类 ， 它 可 以 让 你 访问 媒体 状态 常量 以 及 不 同 的 目 
录 。 我 们 访问 外 部 存储 目录 ,计算 它 的 区 块 大 小 和 数量 。 接 着 把 这 两 个 数字 相 乘 得 到 整个 存储 空 
间 大 小 。 这 并 不 是 广告 宣传 里 的 存储 大 小 , 不 过 也 很 接近 了 。 在 代码 库 里 这 个 方法 可 以 用 来 获取 
广告 宣传 的 存储 空间 ， 不 过 大 部 分 情况 下 ， 实 际 存储 大 小 就 能 满足 需求 了 。 
const storageSizes = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512]; 
const closestSize = (arr, goal) => { 
return arr.find((val) => { 
return val > goal ? val : false; 


}); 
}; 















































const advertisedDiskSize = closestSize(storageSizes, actualDiskSize); 


存储 空间 大 小 往往 是 2 的 乘 方 ， 然 而 也 有 例外 情况 。 这 种 情况 可 以 采用 专门 的 逻辑 来 筛选 出 
存储 空间 大 小 比较 特殊 的 设备 。 为 了 简单 起 见 ， 这 里 不 再 介绍 。closestsize 函 数 接受 一 个 数组 
和 一 个 目标 大 小 作为 参数 , 并 找到 数组 中 第 一 个 大 于 目标 大 小 的 数 。 这 就 是 广告 宣传 的 存储 空间 
大 小 。 这 种 做 法 是 有 道理 的 ， 因 为 我 们 知道 广告 宣传 的 存储 空间 不 会 小 于 实际 的 存储 空间 ,而且 
也 不 会 比 它 大 很 多 。 因 此 ， 第 一 个 大 于 实际 存储 空间 的 数 ， 就 是 广告 宣传 的 存储 空间 大 小 。 






























































5.2.5 ”React Native 的 统一 思想 


移动 设备 领域 十 分 庞大 且 多 样 化 。React Native 试 图 统一 这 个 领域 ， 以 便 为 用 户 提 供 一 致 的 
体验 ， 同 时 也 为 开发 者 提供 简单 直观 的 开发 环境 。 尽 管 如 此 ， 异 常 的 情况 总 会 出 现 。bug 总 是 不 
可 避免 地 混 到 代码 库 中 。 而 且 越 特殊 的 bug 越 难以 分 析 与 解决 。 另 外 ， 有 些 bug 还 只 在 生产 环境 中 
出 现 ， 这 种 情况 下 诸如 网 络 连接 类 型 、 特 殊 的 设备 型 号 以 及 操作 系统 版 本 等 细节 可 能 无 法 获知 。 

幸运 的 是 , 有 大 量 工 具 可 以 追踪 生产 环境 的 bug, 让 这 些 未 知 因素 为 我 们 所 了 解 。React Native 
提供 了 Platform 和 NetInfo 模 块 。Fixt 团 队 开 发 了 react-native-device-specs。 这 些 工具 提供 了 基 
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础 水 平 的 设备 信息 , 与 第 三 方 的 或 者 内 部 的 后 端 服务 集成 后 有 助 于 识别 特殊 的 bug 起 因 。Fixt 团 队 
使 用 了 Mixpanel 来 聚合 用 户 设备 的 统计 数据 ， 应 用 中 使 用 了 Crashlytics 检 测 摇 省 情 况 。 通 过 这 两 
个 工具 的 结合 , 我 们 就 能 捕获 严重 的 bug。 在 每 台 设 备 上 收集 的 数据 能 够 让 我 们 复制 用 户 的 环境 ， 
了 解 他 们 遇 到 的 特殊 问题 并 立即 推送 修复 方案 。 


























5.3 ”身份 验证 


你 曾经 习惯 给 我 的 手机 打 电 话 。 





Drake 


5.3.1 何 为 Digits 


Digits 是 Twitter 提 供 的 手机 号 授权 ( auth ) 服务 ,允许 用 户 通过 短信 或 者 电话 接收 并 输入 一 个 
验证 码 ， 以 此 验证 自己 的 身份 。 用 户 输入 验证 码 之 后 ， 应 用 会 获得 一 个 Twitter ID ， 可 以 用 它 与 
Twitter 的 API 确 认 用 户 吴 份 的 真实 性 。Digits 与 其 他 身份 验证 策略 〈 比 如 社交 账号 登录 ， 以 及 传统 
的 用 户 名 密码 组 合 ) 不 一 样 , 因为 它 从 根本 上 保证 你 获取 到 的 是 一 份 真实 且 唯 一 的 用 户 标识 信息 。 


在 应 用 中 使 用 我 们 所 实现 的 React Native Digits 的 主要 好 处 在 于 , 你 能 够 接 入 并 使 用 原生 的 身 
份 验证 方案 , 提供 了 用 户 手 机 号 就 保证 你 拥有 他 们 的 联系 方式 。 此 外 ,与 传统 的 身份 验证 系统 相 
比 ，Digits 还 有 更 多 好 处 。 垃 圾 邮件 制造 者 可 以 利用 注册 机 器 人 ， 在 那些 没有 基于 电话 号 码 的 服 
务 (比如 邮件 密码 式 或 者 社交 登录 系统 ) 上 轻松 创建 数 千 个 假 账 号 。 对 他 们 来 说 ， 获 取 数 千 个 手 
机 号 有 很 大 难度 ， 这 样 某 种 程度 上 可 以 保证 你 的 用 户 是 真实 的 人 。 

可 以 通过 很 多 服务 ( 如 bumer 号 码 服务 ) 获取 临时 的 短信 号 码 ， 不 过 这 些 服务 要 收费 ， 因 此 
垃圾 邮件 制造 者 使 用 它们 的 可 能 性 不 大 。 

我 们 的 Digits 实 现 方式 相当 直观 ， 结 舍利 用 了 静态 和 实例 方法 ， 让 它 的 代码 很 清晰 ， 我 们 很 
希望 这 个 包 能 够 被 其 他 人 用 到 。 

简单 起 见 ， 假 设 你 已 经 通过 npm install - -save react-native-digits 从 npm 上 下 载 了 这 个 包 ， 
并 按照 使 用 说 明 把 它 连 接 到 你 的 iOS 与 Android 代 码 中 。 

我 们 实现 的 Digits 只 需 很 少 的 配置 。 你 需要 添加 Digits 的 API 密 钥 ， 另 外 针对 Android 平 台 还 要 
在 styles.xml 中 添加 一 些 信息 。 














































































































5.3.2 ”在 代码 内 集成 Digits 


React Native Digits 的 用 法 很 简单 。 我 们 希望 你 把 它 看 成 一 个 视图 元 素 ， 而 不 是 一 个 身份 验证 
操作 或 者 外 部 应 用 。 要 把 Digits 集 成 到 你 的 代码 内 ， 只 需 简 单 地 导入 它 ， 放 到 render 方 法 中 ,并 
也 二、 地 属性 好 可; EE | 
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import Digits from 'react-native-digits'; 


constructor(props) { 

super(props); 

this.state = { showDigits: false } 
} 


render() { 
return ( 
<View> 
<Digits 
onLogin={ () => console.log('Logged in') } 
visible={ this.state.showDigits } 
/> 
<Button 
onClick={ () => this.setState({ showDigits: true }) } 
/> 
</View> 
好 
} 


点 击 按钮 会 把 Digits 组 件 从 隐藏 切换 为 可 见 ， 于 是 就 能 看 到 Digits 的 手机 号 输入 提示 。 


Carrier 令 10:14 PM i 


Cancel Fixt 


What's your phone number? 


United States +1 


KT alo ole] lildnn tldlel a Koelole ls 








By tapping "Send confirmation code" above, Digits by 
Twitter will send you an SMS to confirm your phone 
number. Message & data rates may apply. 
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用 户 输入 手机 号 之 后 ， 就 会 收 到 一 条 短信 ， 把 里 面 的 验证 码 输入 到 下 一 个 界面 的 文本 框 中 。 
如 果 几 秒 内 没有 收 到 验证 码 ,， 界面 上 就 会 出 现 一 个 链接 ,可 以 让 用 户 请 求 男 一 个 验证 码 。 第 二 个 
验证 码 将 通过 自动 语音 电话 发 送 ， 因 此 从 技术 角度 来 说 ，Digits 也 对 国定 电话 可 用 。 不 过 从 用 户 
体验 的 角度 来 说 ，Digits 主 要 用 于 短信 身份 验证 。 





Carrier 全 10:14 PM 





Cancel Fixt 





We sent you a code. 


Didn't get a code? Request another. 


Enter your 6-digit code 


By tapping "Continue", your Digits phone number and/or 
email address will be shared with Fixt and other users of 
Fixt can discover you by phone number and/or email. 





用 户 输入 Twitter 发 送 给 Digits 的 验证 码 之 后 ， 你 会 接收 到 Twitter 发 回 的 用 户 会 话 信息 ， 通 过 
这 些 信 息 你 就 能 在 服务 端 验证 用 户 身 份 。 最 后 一 步 非 常 重要 。Digiks 不 同 于 authe 那 种 完整 的 身份 
验证 方案 。 收 到 的 Twitter ID 本 身 不 能 作为 安全 的 身份 验证 方法 。Twitter 验 证 过 用 户 所 发 送 的 
Twitter ID 为 有 效 之 后 ， 你 要 给 他 们 发 送 JWT 令 牌 这 样 的 信息 


Co 





5.3.3 样式 





添加 自 定义 样式 非常 简单 。 可 以 在 JavaScript 代 码 中 指定 样式 ， 但 不 巧 的 是 ， 在 iOS 平 台 上 这 
样 做 只 能 改变 Digits 组 件 的 颜色 。 
<Digits 
accentColor="(Color of buttons here)" 
backgroundColor="(Background color for all views" 


. 5 
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对 于 Android 平 台 而 言 ， 需 要 在 android/app/src/main/res/values/styles.xml 文 件 中 添加 样式 。 这 
样 做 的 原因 是 Digits 在 Android 平 台 上 使 用 主题 来 设置 样式 。 不 巧 的 是 , Android 的 主题 无 法 通过 编 
程 的 方式 进行 更 新 ， 因 此 对 原生 Android 代 码 中 的 主题 ， 硬 编码 是 唯一 的 选择 。 这 意味 着 Android 
平台 需要 重新 编译 应 用 才能 看 到 Digits 的 样式 变化 。 如 果 你 使 用 CodePush 进 行 部 署 ， 那 么 还 要 在 
Play Store 或 者 Amazon Store 上 提交 更 新 ， 这 样 用 户 才能 看 到 Digits 主 题 的 变化 。 大 多 数 情况 下 这 
不 是 什么 大 问题 ， 不 过 如 果 你 重新 设计 了 应 用 ， 并 且 提 交 了 CodePush 更 新 ， 最 终 Digits 组 件 的 主 
题 样式 可 能 与 应 用 的 其 他 地 方 有 所 差异 。 不 过 在 Android 平 台 上 编译 主题 设置 很 简单 。 

把 以 下 代码 放 到 android/app/src/main/res/values/styles.xml 文 件 中 ,一 定 要 这 样 做 , 否则 将 导致 
错误 发 生 。 


<FeSOUFCeS 
















































































<-- Customize this --> 
<style name="CustomDigitsTheme" parent="android:Theme.Holo.Light"> 
<item name="android:textColorprimary">@android:color/black</item> 
<item name="android:textColorSecondary">@android:color/darker_gray</item> 
<item name="android:windowBackground">@android:color/white</item> 
<item name="android:textColorLink">#000000</item> 
<item name="android:colorAccent">#000000</item> 
<item name="dgts__accentColor">#000000</item> 
</style> 


</resources> 


以 上 就 是 修改 Digits 样 式 的 全 部 内 容 ! 


5.3.4 回调 函数 


我 们 提供 了 JavaScript 层 的 两 个 回调 函数 ,一 个 用 于 请 求 成 功 (onLogin )， 另 一 个 用 于 请 求 失 
败 ( onError )。 出 现 错误 的 情况 下 会 把 原生 层 抛 出 的 错误 传递 给 你 。 请 求 成 功 后 会 把 已 进行 身 
份 验证 的 用 户 的 凭据 传递 给 你 。 你 需要 把 这 些 信 息 发 送 到 自己 的 服务 端 ， 以 便 和 Digits 确 认 这 些 
和 凭据 信息 的 合法 性 。 接 着 就 可 以 很 安全 地 把 JWT 令 牌 发 送 给 用 户 , 或 者 使 用 任何 特定 的 身份 验证 
方案 。 

React Native Digits 的 优秀 之 处 在 于 它 封 装 了 原生 的 Digits 实 现 。 这 意味 着 你 无 需 关 心 Digits 的 
内 部 状态 ， 也 不 用 维护 Digits 与 Twitter 服务 器 之 间 的 安全 连接 。 然 而 ， 这 样 也 存在 缺陷 。Digits 没 
有 提供 oncancet 回 调 函 数 ， 因 此 无 法 把 它 提供 给 JavaScript 层 。 用 户 取 消 Digits 身 份 验证 流程 可 能 
导致 奇怪 的 bug， 这 取决 于 你 在 代码 中 使 用 React Native Digits 的 方式 。 

举例 来 说 ， 以 下 代码 中 用 户 取 消 Digits 身 份 验证 流程 后 ， 会 导致 他 不 能 再 次 使 用 Digits 身 份 
验证 。 
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export default class MyApp extends Component { 
constructor(props) { 


super(props); 


this.state = { showDigits: false }; 


} 


showDigits() { 
this.setState({ showDigits: true }); 
} 


render() { 
return ( 
<View> 
{ showDigits ? ( 
<Digits 
onLogin={ () => console.log('Logged in') } 
visible={ true } 
/> 
):( 
<Button onClick={ () => this.showDigits }> 
Open Digits 
</Button> 
) 
} 
</View> 
); 
} 
} 


用 户 取 消 Digits 身 份 验 证 后 , 组 件 内 部 状态 没有 更 新 成 showDigits: false, 因为 缺少 onCancet 
处 理 函数 。 可 惜 解决 这 个 问题 的 方式 不 太 优雅 。 我 们 把 showpigits 方 法 改写 成 以 下 形式 。 
showDigits() { 
this.setState({ showDigits: true }); 
setTimeout(() => this.setState({ showDigits: false }), 1000); 
} 
任何 平台 上 setTimeout 回 调 函 数 都 不 会 隐藏 Digits 组 件 ， 因 为 Digits 独 立 于 视图 栈 之 外 。 它 处 
于 JavaScript 层 之 上 ， 不 受 该 层 的 视 网 变 化 影响 。 把 状态 设置 回 showDigits: false 可 以 让 Android 
平台 的 用 户 取消 身份 验证 后 再 次 进行 尝试 。 后 面 对 于 这 个 问题 的 另 一 种 解决 方案 , 将 通过 实现 静 
态 方法 来 启动 Digits。 但 这 样 做 也 有 代价 ， 很 难看 清 应 用 视图 发 生 了 什么 。 















































5.3.5 ”注销 
我 们 提供 了 静态 方法 用 于 注销 用 户 。 


static Logout() { 


RNDigits. Logout(); 
} 
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这 段 代 码 很 好 理解 。 你 可 以 在 JavaScript 代 码 的 任何 地 方 通过 静态 方法 来 调用 
Digits.Logout()。 如 果 通 过 prop 属 性 来 控制 它 ， 需 要 把 组 件 放 到 你 希望 用 户 进行 注销 的 视图 中 ， 
而 这 并 不 是 该 方法 的 意义 所 在 ， 因 为 它 不 像 Digits 身 份 验证 组 件 那 样 以 视图 为 基础 。 原 生 层 的 实 
现 很 简单 。 

以 下 是 Android 的 代码 。 

@ReactMethod 


public void logout() { 
Digits.getSessionManager().clearActiveSession(); 





























} 
我 们 简单 地 使 用 Android 的 SessionManager 来 清除 活跃 的 DigitsSession 会 话 。 
以 下 是 iOS 的 代码 。 


RCT_EXPORT_METHOD( Logout) 


[[Digits sharedInstance] logOut]; 


这 两 个 平台 的 代码 基本 上 没什么 区 别 。 


如 果 你 想 要 实现 自己 对 原生 Digits 注 销 操 作 的 封装 ， 可 以 利用 这 些 方法 开发 一 个 注销 按钮 ， 
并 把 它 作 为 你 的 包 或 者 UI 组 件 的 一 部 分 ， 而 不 用 静态 方法 的 形式 。 








5.3.6 ”实现 





以 下 是 Fixt React Native Digits 完 整 的 JavaScript 层 实现 。 如 你 所 见 ， 它 相当 简单 ， 而 且 做 到 了 
模块 化 。 我 已 经 添加 了 注释 ， 以 便 详细 解释 每 行 代码 。 


export default class Digits extends Component { 


componentWillReceiveprops(props) { 
// 如 果 Digits 原 本 不 可 见 且 现 在 需要 显示 
if (props.visible && this.props.visible == false) { 
// 那么 显示 Digits 
this.show(); 
} 
} 


show() { 
// 这 些 颜色 值 可 以 从 J]S 层 定制 .05 的 Digits 实 现 
const { accentColor, backgroundColor } = this.props; 
const config = { accentColor, backgroundColor }; 


RNDigits.view(config, (err, session) => { 
// 出 错时 触发 错误 回调 济 数 
if (err) { 
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this.props.onError(err); 

// 否则 触发 onLogin 回 调 亏 数 

} elsef{ 
this.props.onLogin(session); 


}); 
} 


render() { 
// Digits 本 质 上 作为 一 个 独立 的 应 用 ， 因 此 不 需要 泻 染 
return false; 
} 
} 


Digits.propTypes = { 
// 这 些 属 性 是 可 选 的 ， 不 过 大 多 数 情况 下 都 会 用 到 
accentColor: PropTypes.string, 
backgroundColor: PropTypes.string, 
onError: PropTypes.func， 
// 这 些 属性 是 必需 的 ， 因 为 和 Digits 的 基本 功能 相关 
onLogin: PropTypes.func.isRequired, 
visible: PropTypes.bool.isRequired, 


}; 


Digits.defaultProps = { 
onError: (err) => console.warn(err), 
visible: false, 
}; 
我 们 对 Digits 的 实现 方式 不 是 构建 这 个 包 的 唯一 方式 。 它 只 是 适用 于 我 们 的 应 用 需求 和 编程 
架构 。 如 果 你 在 寻找 自行 开发 封装 Digits 的 工具 ， 那 么 Digits 的 SDK 文 档 是 绝 佳 的 入 门 读物 。 如 果 
你 需要 封装 Digits 的 示例 ， 我 们 完整 的 实现 代码 ， 包 括 原生 的 部 分 ， 也 是 很 有 用 的 灵感 来 源 。 






























































5.3.7 ”数据 维护 


Digits 提 供 了 一 种 绝妙 的 方式 来 确保 用 户 的 真实 性 ， 还 可 以 避 开 垃圾 邮件 制造 者 。 然 而 使 用 
Digits 验 证 用 户 时 会 遇 到 一 些 数 据 维护 的 问题 。 幸 运 的 是 ， 你 从 Twitter 会 话 取 回 的 Twitter ID 没有 
任何 问题 。 无 论 用 户 是 否 注 册 了 Twitter 或 者 把 账户 绑 定 了 手机 号 ，Twitter 每 次 都 对 每 个 手机 号 返 
回 相 同 的 Twitter ID。 

问题 在 于 , 随 着 时 间 的 推移 , 手机 号 可 能 会 易 主 一 -人们 可 能 搬家 、 去 世 , 还 有 启用 新 号 码 。 
更 换 手 机 号 后 ,他 们 不 会 通知 你 , 让 你 帮助 他 们 把 账户 转移 到 当前 手机 号 名 下 。 即 使 他 们 通知 了 
你 ， 你 玖 怕 也 不 想 帮 他 们 一 个 个 地 绑 定 新 手机 号 。 

解决 这 个 问题 的 一 种 思路 就 是 ,让 用 户 可 以 选择 用 账户 名 和 密码 来 登录 。 从 责任 的 立场 上 看 ， 
这 个 解决 方案 似乎 不 错 。 某 人 买 到 他 人 的 旧 手 机 号 后 也 能 取得 对 方 的 账户 , 这 不 属于 你 的 责任 范 
上 畴 。 遗 贼 的 是 ， 这 种 用 户 体验 很 糟糕 。 用 户 不 能 访问 自己 的 账户 会 感到 很 诅 丧 ,并 且 他 们 会 因 自 
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渡 





己 的 敏感 数据 暴露 给 其 他 人 而 生气 。 此 外 ,你 还 要 维护 男 一 个 无 法 解决 最 初 问题 的 的 身份 验证 系统 。 

更 好 的 选择 是 让 用 户 通 过 用 户 名 密码 注册 ， 但 是 让 他 们 在 注册 过 程 中 用 Digits 验 证 自己 的 账 
户 。 这 种 方式 下 ， 用 户 拥有 唯一 且 一 致 的 方式 来 访问 账户 ， 而 你 又 能 得 到 Digits 的 好 处 。 这 仍然 
保证 了 用 户 的 真实 性 ， 还 能 获得 他 们 的 手机 号 。 

某 些 应 用 不 需要 用 户 的 任何 特殊 信息 。Digits 也 是 这 类 应 用 绝 佳 的 身份 验证 候选 方案 。 如 果 
不 需要 用 户 信息 ,那么 用 户 通过 手机 号 交易 取得 他 人 的 身份 标识 也 就 无 关 紧 要 了 。 这 种 情况 下 
Digits 可 以 作为 完整 的 身份 验证 方案 。 你 的 应 用 会 有 一 个 简单 原生 的 用 户 身 份 验证 方法 ， 并 且 还 
能 从 保证 用 户 真实 性 方面 受益 。 
















































































5.4 建议: 如 何 管理 快速 变化 的 生态 


React Native 的 发 展 速度 很 快 。 如 此 迅猛 的 发 展 带 来 了 许多 创新 与 进步 ， 同 样 也 带 来 了 一 些 
挑战 。 浏 览 一 下 React Native 的 生态 圈 就 会 很 有 感触 ， 因 为 几 个 月 前 还 有 用 的 建议 和 解决 方案 ， 
现在 很 可 能 已 经 不 再 适用 。 幸 和 运 的 是 ，React Native 的 核心 团队 十 分 出 色 ， 积 极 响应 Github 上 的 
issue， 并 且 Stack Overflow 上 也 有 大 量 的 社区 开发 者 。 以 下 几 点 提示 曾经 帮助 我 们 的 团队 专注 于 
代码 ， 避 免 了 在 弄 清 React Native 的 复杂 生态 上 浪费 时 间 。 



































5.4.1 让 应 用 保持 最 新 


没有 让 应 用 与 React Native 的 最 新 版 本 保持 一 致 会 很 危险 。 再 怎么 强调 这 一 点 也 不 为 过 。 让 
应 用 保持 最 新 ， 能 够 避免 最 终 决定 升级 时 却 受阻 于 几 个 月 内 的 重大 更 改 。React Native 提 供 了 工 
具 来 简化 更 新 过 程 。 

如 果 你 安装 了 React Native CLI 工 具 ， 只 需要 在 项 目 根 目录 输入 react-native upgrade 即 可 。 
如 果 项 目的 全 新 分 支 不 包含 未 提交 的 改动 , 这 项 操作 会 更 简单 。 原因 主要 在 于 这 条 命令 不 能 完美 
地 升级 。 它 所 做 的 只 是 重 写 需要 更 新 的 文件 , 仿佛 新 建 了 一 个 项 目 。 升级 过 程 中 你 需要 手动 检查 
每 个 文件 ， 并 决定 哪些 要 保留 哪些 要 升级 。 这 个 过 程 稍微 有 些 麻烦 ， 不 过 为 了 与 React Native 代 
码 库 保持 一 致 ， 值 得 这 样 做 。 

如 果 你 决定 不 进行 升级 ， 而 要 停留 在 特定 版 本 的 React Native 上 ， 就 要 确保 在 package.json 文 
件 中 锁 死 版 本 依赖 。 这 样 当 其 他 包 自 然而 然 地 随 着 新 版 的 React Native 升 级 时 ， 就 不 会 出 错 ， 否 
则 将 很 难 调试 。 当 你 决定 升级 React Native 时 ， 也 要 确保 检查 其 他 依赖 支持 高 版 本 的 React Native 
后 再 升级 它们 。 
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5.4.2 ”浏览 文档 


过 去 一 年 中 ，React Native 的 文档 有 了 很 大 的 改进 。 文 档 官网 提供 了 很 有 价值 的 信息 ， 比 如 
创建 新 项 目 时 如 何 配 置 React Native 、JavaScript 层 的 知识 ， 以 及 如 何 开发 自己 的 原生 模块 。 也 可 
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以 按照 发 布 版 本 浏览 文档 ， 这 样 当 你 决定 延迟 升级 时 ， 就 不 至 于 无 法 查看 适合 当前 React Native 
版 本 的 文档 。 

然而 ，React Native 还 有 很 大 一 部 分 缺少 文档 ， 或 者 文档 仍 在 编辑 ， 尤 其 是 原生 代码 的 部 分 。 
尽管 大 部 分 使 用 React Native 代 码 库 的 开发 者 的 关注 重点 不 是 原生 部 分 ， 但 开发 自己 的 原生 模块 
时 必然 需要 浏览 原生 代码 。 幸 运 的 是 ， 虽 然 官 网 上 没有 文档 ， 但 是 React Native 的 原生 部 分 包含 
详细 的 注释 。 理 解 如 何 自 行 开发 的 最 佳 方式 就 是 熟 读 几 个 较 底 层 的 原生 模块 代码 。 

































































5.4.3 何 处 以 及 如 何 寻 求 帮助 


寻找 React Native 相 关 信息 的 方式 数不胜数 。 如 果 你 要 找 特定 的 原生 模块 ， 可 以 尝试 nppm 或 者 
js.coach。 如 果 找 到 的 模块 不 能 完全 满足 你 的 需求 ， 还 可 以 提交 拉 取 请 求 (pull request )， 对 这 些 
项 目 之 一 进行 改进 ， 或 者 以 它们 为 灵感 来 自己 实现 一 个 。 

如 果 你 的 问题 比较 常见 ， 应 该 先 查 阅 React Native 的 Github 仓 库 和 文档 。 另 一 个 支持 React 
Native( 也 包括 许多 其 他 框架 和 语言 ) 的 资料 来 源 就 是 Stack Overflow。 也 可 以 尝试 一 下 Discord ， 
这 是 一 个 拥有 广大 React 以 及 React Native 社 区 的 聊天 应 用 。 无 需 多 言 ， 只 要 你 尽 可 能 清晰 详细 地 
描述 你 的 问题 ， 以 上 任何 方式 都 能 获得 有 帮助 的 回复 。 如 果 你 提出 了 一 个 问题 又 自己 解决 了 它 ， 
请 同样 提交 解决 方案 。 这 样 肯定 能 帮 到 以 后 遇 到 相同 问题 的 人 。 

希望 本 书 能 够 帮助 你 增长 经 验 和 知识 ， 让 你 能 够 自如 地 使 用 React Native 开 发 出 自己 的 应 用 。 
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所 在 的 开发 团队 规模 较 小 ， 但 想 要 为 jiOS 和 Android 两 个 平台 开发 应 用 ? 
早 就 听 说 过 React Native 的 大 名 ， 却 不 清楚 是 否 适 合 开 发 自己 的 应 用 ? 
研究 无 数 代码 之 后 ， 想 要 了 解 更 多 React Native 在 当今 业界 的 实际 使 用 情况 ? 
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看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 
译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com。 
在 这 可 以 找到 我 们 : 


微 博 @ 图 灵 教育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 
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